Mobile menu icon alignment

[kennybloggins]

Hi! I’m trying to get the hamburger icon to align to the right. It does on desktop, but not on mobile. Site is here: hawthornbev.com.

Using this CSS currently:

a.x-btn-navbar, .x-btn-navbar, .x-btn-navbar.collapsed { float: right; !important }
Thanks!

[jade]

Hi there,

Please try this code:

@media (max-width: 480px) {
    .x-btn-navbar {
        float: right !important;
    }
}

Hope this helps.

[kennybloggins]

Not working

[Prasant]

Hello There,

I see that for header element you have assigned a max-width: 200px applicable for mobile devices. And that is causing the problem. To resolve either you need to change the values or remove that and above code shared by our staff will work fine.

Thanks.

[kennybloggins]

Still nothin’

[christopher]

Would you please kindly get back to us with the URL/User/Pass of your website using the Secure Note functionality of the post to follow up the case?

Thank you.

[christopher]

Hi there,

Thank you for providing the information.

I checked the code you have added and it is working ok, I also checked the site with iPhone 6s and here was the result:

The Hamburger menu is aligned to the right side of the screen.

If you see something other than the screenshot I provided you will need to clear your mobile browser cache or use another device to test the case.

Thank you.

[kennybloggins]

Perfect. Thank you so much!

[nico]

Hi @kennybloggins,

Happy to hear that.

Feel free to ask us again.

Thanks.