Use ordinary menu on mobile

This topic has 18 replies, 5 voices, and was last updated 6 years, 10 months ago by Tom.

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

Author

Posts
June 23, 2017 at 8:16 am #337981

Christoph

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…

June 23, 2017 at 8:18 am #337982

Roberto Enrique

I was about to ask exactly the same 🙂
Following…

June 23, 2017 at 9:04 am #338001

Leo
Staff
Customer Support

Hi guys,

Is this what you are looking for? https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

June 24, 2017 at 1:38 pm #338460

Christoph

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?

June 24, 2017 at 1:41 pm #338464

Leo
Staff
Customer Support

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 🙂

June 24, 2017 at 2:24 pm #338474

Christoph

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…

June 24, 2017 at 5:17 pm #338504

Leo
Staff
Customer Support

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 🙂

June 24, 2017 at 6:47 pm #338525

Tom
Lead Developer
Lead Developer

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 🙂

June 25, 2017 at 2:28 am #338584

Christoph

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)

June 25, 2017 at 5:51 am #338634

Sven

I’ve added a menu widget to the top bar to do that, worked like a charm.

June 25, 2017 at 8:23 am #338687

Leo
Staff
Customer Support

The proposed method will work with autoptimize.

Just make sure you follow all the settings here: https://generatepress.com/fastest-wordpress-theme/

June 25, 2017 at 5:46 pm #338886
Christoph
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??
June 25, 2017 at 5:51 pm #338887

Leo
Staff
Customer Support

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

June 26, 2017 at 2:55 am #339013

Christoph

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.

June 26, 2017 at 8:06 am #339178

Leo
Staff
Customer Support

Likely overwritten by something else.

Can you provide a link to your site? Thanks!
Author

Posts