[Resolved] Mobile desktop/hamburger menu

[Kle]

Hi there,

I have two menus on my website and I wonder how can I make one of them to show up not in hamburger style but normal/desktop style when in mobile. I couldn’t find the settings for this in the customizer.

Thank you.

[David]

Hi there,

this CSS for example will keep the secondary nav the same as desktop:

@media (max-width: 768px) {
    #secondary-navigation .menu-toggle {
        display: none;
    }
    #secondary-navigation ul {
        display: block;
    }
}

[Kle]

Thank you David,

it was the primary menu (thought it was the secondary) and changed #secondary-navigation to #primary-menu, it works but still shows the hamburger icon, and the cart icon appears twice now.

I will put the domain address and password of my work in progress website in case you need it to take a look.

[David]

OK so to remove the Menu toggle and additional cart – then target these:

.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items {
    display: none;
}

[Kle]

Thank you David,

This is what I put:

   #primary-menu .menu-toggle {
        display: none;
    }
    #primary-menu ul {
        display: block;
    }
	.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items {
    display: none;
}
}

Is that the best approach?

Thanks: )

[David]

You shouldn’t need:

#primary-menu .menu-toggle {
        display: none;
}

But no harm it being there.

[Kle]

Perfect, thank you David.

One question, to change the font size/color of those menu items from the mobile whats the code?

[Leo]

Menu font size can be adjusted in the customizer with the mobile toggle.

Colors would be this:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        color: #fff;
        background-color: #000;
    }
}

[Kle]

Perfect, thank you Leo: )

[Leo]

No problem 🙂

[Author]

Posts