Leo
(@leohsiang)
Hi there,
Can you try this PHP snippet and see if it works for you?
add_filter( 'generate_mobile_menu_media_query', function() {
return '(max-width: 2000px)';
} );
Adding PHP: https://docs.generatepress.com/article/adding-php/
Let me know 🙂
Thank you, it worked at least for not showing all categories in the desktop. But as i don’t like the way it shows the list, i’m wondering if it’s possible to make two types of menus and show one type of menu for mobile or tablet users, and the other type for desktop users.
My problem is that i have a big number of categories and i don’t know how to show them the way i want. I know that in mobile or tablet small screens, there’s no a better way to show a large list of categories, but i would like to show the large list of categories the way it describes here: https://docs.generatepress.com/article/building-simple-mega-menu/
The problem is that this mega menu is ok for desktop users, but is ugly and not useful for mobile or tablet users. Don’t know if there’s a way to show one type of menu for mobile or tablet users and another type of menu (mega menu) for desktop users.
Leo
(@leohsiang)
That mega menu CSS is using media query @media (min-width: 769px) { } so it should only be desktop only and leave the mobile menu unaffected.
But as i’m using the same menu for both situations, with child and grandchild items, the mobile menu looks bad.
It will me good a way to make decisions, so if you are a desktop user, it will show the menu 1 for example, and if you are mobile user, it will show the menu 2 (with no child or grandchild items).
Leo
(@leohsiang)
This problem can be easily solved if you have the premium plugin so you can use the off canvas navigation for mobile only:
https://docs.generatepress.com/article/off-canvas-panel-overview/
With the free theme, you can basically add all the menu items twice, then hide one on desktop/mobile using the built-in hide-on classes in the first example here:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
Thank you, i will look for it then.
So is there a way to hide the navigation bar for desktop users applying hide-on-desktop class to the navigation section?
Theme Author
Tom
(@edge22)
There is, but it’s likely easier to just use CSS:
@media (min-width: 769px) {
#site-navigation {
display: none;
}
}
Let me know if that helps or not 🙂
