Archived topic
Hide main menus but show mobile menu when in mobile
3 replies · Started by deaf_aotearoa on February 27, 2023
Our website at deaf.org.nz has two menus. A Main Menu and a Top Menu. When we view the website on a mobile we still see two menus (hamburger menus).
What we would like to happen is to have a new Mobile Menu appear instead of the two menus. I have created a Mobile Menu comprising of the contents of the Main Menu and the Top Menu together into one larger menu. I have tried to follow the instructions at https://docs.generatepress.com/article/using-a-different-menu-on-mobile/ but I now end up with 3 menus showing while on mobile.
We are also using the Max Mega Menu plugin.
Hi there,
try adding this CSS to your site:
@media(max-width: 768px) {
.secondary-navigation,
#mobile-header .menu-toggle {
display: none !important;
}
#mobile-header #mega-menu-wrap-mobile-menu {
order: 10;
margin-right: 20px;
}
}
Wow! So elegant. That solution worked perfectly.
A few extra changes in Max Mega Menu and now I have a mobile menu I am happy with :)
Happy to be of help
