Archived topic
Use ordinary menu on mobile
18 replies · Started by Christoph on June 23, 2017
I'd like to use (a reduced version of) my desktop secondary menu also on mobile, i.e. I don't want it to be transformed into a hamburger button centered at on the navbar at the top of the page. Is there a way to a achieve this in GP? I could not find any setting for it...
I was about to ask exactly the same :-)
Following...
Hi guys,
Is this what you are looking for? https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/
Yes, that looks like the solution. However, I don't feel excessively comfortable with the php part of that solution and I wonder whether this could not be integrated as an option into the theme?
No coding required :) All you have to do for the php part is to copy and paste the code into Code Snippets and click Save and Activate.
Thanks for the suggestion though we will consider it for sure :)
I have had my site down twice in the past because of code snippets. If it's so easy, why don't you integrate it into the GP code, add a toggle switch in the settings and it's done.
I found it strange that the GP team would rather write a page explaining users how to modify their code than to simply add it option to the theme. Apparently this seems to be a recurring question that users have...
We try to add things that majority of users are looking for so the theme and plugins are not bloated and this request hasn't really come up that often.
The documentation pages are written so special customization can be done by simply copying and pasting.
If we add all the tricks and special customization in the doc pages into the plugin the whole thing will definitely be slower.
The code on that page is well tested so it should definitely work and not crash your site (using Code Snippets should prevent that to happen even if there are errors in the code).
Again we appreciate the suggestion and will definitely look into adding it in the future if we get more requests :)
I'd like to add options to allow users to choose the mobile menu breakpoints, including not having one at all. Unfortunately, caching plugins make this very difficult. It's something being researched :)
I see, so you're saying that rather than just providing an on/off switch, you want the full solution with adjustable breakpoints with "no breakpoint at all" being just a specific setting?
So those issues with caching plugins, will they exist if I make the changes as proposed above? (I use autoptimize)
I've added a menu widget to the top bar to do that, worked like a charm.
The proposed method will work with autoptimize.
Just make sure you follow all the settings here: https://generatepress.com/fastest-wordpress-theme/
Okay, I went ahead and changed the code as per https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/
I even managed to hide two menu items by adding
@media(max-width: 768px) {
.menu-item-1116 a { display: none !important;}
.menu-item-1115 a { display: none !important;} }
However, I also wanted to hide some menu items in the primary menu in desktop mode but I just can't get them to disappear. Here is what I tried:
@media (min-width:769px){
.menu-item-1532 a {display:none !important;}
.menu-item-1531 a {display:none !important;}
}
But that doesn't have any effect while this works fine (except that it disables those menu items globally:
`.menu-item-1532 a {display:none !important;}
.menu-item-1531 a {display:none !important;}`
Why can I not target those menu items in desktop only??
Can you try these built in classes: hide-on-mobile hide-on-tablet hide-on-desktop
in the Custom Classes field? https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Wow, those classes are really great to have!
But the problem is: they don't always seem to work. I did make some items disappear on desktop, but on mobile it doesn't work (note that already in the CSS hack above, I had to use !important to make it work):

As you can see, the class makes it all the way to the browser but it is nevertheless ignored.
Likely overwritten by something else.
Can you provide a link to your site? Thanks!