[Resolved] How to hide menu on mobile and tablet views

[magali]

Hi,

I am using Elementor to design my menu for my website. To avoid having 2 menus displayed on each page, I need to hide the menu that is displayed by default with generatepress.
Following what was described in an other topic, I went to customize/layout/primary menu/navigation location and chose “no navigation”. That worked great ON DESKTOP VIEW, the generatepress menu disappeared. But when I switch to MOBILE or TABLET VIEWS, the menu is still here, even when No navigation is chosen for those views too.

Leo recommended to add the CSS:

@media (max-width: 768px) {
.main-navigation {
display: none;
}
}

This didn’t work.
(However my knowledge with CSS and coding in general is very low, so I will awkwardly specify that I copied this CSS and simply pasted it in the Customize/additional CSS tool that WordPress offers. I guess that should have worked??)

Any other suggestion?

Thank you for your help!

Magali

[Leo]

Hi there,

Your site is under coming soon page.

Any chance you can unlock it so we can see?

Thanks!

[magali]

Yes sorry… I just disabled the coming soon mode…
Thank you!
Magali

[Leo]

Can you try disabling the mobile header feature?
https://docs.generatepress.com/article/mobile-header/

Then I think the CSS will work.

Let me know 🙂

[magali]

I did it and the menu disappeared on both mobile and tablet views now!! Perfect thank you so much!!

Magali

[Leo]

No problem 🙂

[Author]

Posts