[Resolved] Hide main menus but show mobile menu when in mobile

Log In Free Support

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

This topic has 3 replies, 2 voices, and was last updated 3 years, 3 months ago by David.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
February 27, 2023 at 3:53 pm #2549308

deaf_aotearoa

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.

February 28, 2023 at 5:31 am #2549826
David
Staff
Customer Support
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;
    }
}
```
February 28, 2023 at 2:12 pm #2550558

deaf_aotearoa

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 🙂

March 1, 2023 at 12:48 am #2550919

David
Staff
Customer Support

Happy to be of help
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.