Mobile desktop/hamburger menu

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;
    }
}

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.

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

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

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: )

You shouldn't need:

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

But no harm it being there.

Perfect, thank you David.

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

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;
    }
}

Perfect, thank you Leo: )

No problem :)