[Support request] Customize Hamburger Menu for Mobile

[Joseph]

I would like to customize the hamburger menu on mobile and remove the word “Menu” next to the hamburger icon so I can have the icon by itself. I also want it to be aligned to the right on mobile.

[David]

Hi there,

you can remove the word Menu from the Customizer > Layout > Primary Navigation –> Mobile Menu Label

Do you want the site logo to the left and the mobile toggle aligned right so they are inline?

[Joseph]

I was able to successfully remove the word “menu.” I would like the hamburger icon to be aligned right on mobile, but I want the menu items centered when the user clicks on the hamburger. How can I do this? Reference this site (mobile view): https://neilpateldigital.com/

[David]

Try this CSS:

.main-navigation .menu-toggle {
    width: auto;
    float: right;
    position: relative;
    top: -45px;
}
#site-navigation.toggled .main-nav li {
    text-align: center !important;
}

[Joseph]

That worked in terms of aligning the hamburger menu right, but the burger menu is now on top of my logo on mobile since my logo is centered on mobile. How can I align the logo left on mobile?

[David]

If you want the logo aligned left and the menu aligned right. Then you don’t need the CSS.
Go to Customizer > Layout > Header –> Enable the Mobile Header and give add the logo in the field provided.

[Joseph]

Thanks a lot for your efforts. I think we are almost there – have a look at the mobile view for my site. I added the logo for the mobile menu in the customizer, however, as you can probably see, the logo still does not show up in mobile view.

[David]

The mobile header logo takes its height from the Menu Item Height you have set in the customizer > layout > primary nav.
Increase the mobile size to display the logo

[Ighty]

Hi, I followed this CS, but the hamburger is now missing when because of the top: -45px, when using the sticky navigation on mobile, if I don’t use that CSS the hamburger will go on the far right with no spacing when sticky, while when at the top of the page, it is to low compare to the top of the page.
Should I open another topic for this?

[David]

Hi there,

if you can raise a new topic where you can share your Site URL privately we can take a look. Each use case can be very different.

[Author]

Posts