[Resolved] Mobile Menus

[Daniel]

Hello,

On a site I’m working on, we’re using both the primary and the slideout menu. He has a lot of options he wants to use, so we’ve put a bunch of those into the slideout navigation. I added the php from this support thread to add a new mobile location, but I’m still having some viewing issues. What I’d like is that when you are on mobile, there is one small menu bar, and it only opens a condensed mobile menu.

Would it make sense potentially to just have that menu be on the secondary menu location and only show the secondary menu when it’s in mobile?

Thanks,

[Tom]

Hi there,

Have you tried using the mobile header method I mentioned in that topic? It would allow you to:

1. Set the slideout to desktop only.
2. Create a new menu just for the mobile header.

Let me know 🙂

[Daniel]

Hey Tom,

Yes, I was looking at that. Here’s the issue.

Currently, the slideout menu has two menus in it that I assigned through Widgets. The slideout menu has Text > Menu > Text > Menu because my client wanted to list all possible businesses and have them all redirect to the same page.

Right now, there is no menu “assigned” to the Slideout menu, I dropped them in via widgets. I also have two different elements on the pages for transparent menu schemes. On the home page, the menu buttons and logo are white, and on every other page, they are full color. This is also causing some strange interactions. When I switch to mobile view via Google Web Tools, I can’t even really see the menu on the home page, and it’s in the middle of all the text and opens the wrong menu on every other page.

I’m happy to give some login credentials to the site if you’d like to see what’s going on.

Thanks,

Daniel

[Tom]

Hi there,

I’m not sure I fully understand yet.

On mobile, you can just use the mobile header with a newly created menu – it doesn’t need to use the slideout navigation at all. You can just set the slideout navigation to “Desktop” in the settings, and then your mobile menu will use the small menu you apply to it.

Does that not work?

[Daniel]

Hey Tom,

I’ve made some screenshots so you can see what I mean. I’m showing the responsive settings through Google’s Web Tools in iPhone mode.

Menu Settings

I tried to add descriptions to every image so you can understand what I’m showing. Basically, no, I have it set to desktop only, but it’s not even using a slideout on mobile, it’s using a drop-down. I think there’s some weird functionality going on with the two elements I’ve assigned as well.

[Tom]

Can you enable the mobile header option?: https://docs.generatepress.com/article/mobile-header/

That should make this filter work:

add_filter( 'generate_mobile_header_theme_location', function() {
    return 'mobile-menu';
} );

[Daniel]

Hey Tom,

This is what I’ve got right now. Should I still add what you’ve posted there?

Current Mobile Menu

[Tom]

Nope, you should be good function-wise with that. Have you enabled the mobile header?

[Daniel]

What do you mean by enabled? I have a menu assigned to the Mobile Menu? Maybe I just haven’t been using this right.

[Tom]

I mean this option: https://docs.generatepress.com/article/mobile-header/

Is that turned on? If so, it should use the mobile menu you specific with your function, as long as you have a menu assigned to it in “Appearance > Menus”.

[Daniel]

Alright, that fixes the menu problem! Thank you very much, that helps a ton.

Now the only other issue that I’m running into is that the background is still transparent. I’ve attempted to adjust this in the Appearance > Customize > Colors, but I can’t find where I can change the menu color for that drop down. It’s still a transparent background with white text. I’ve changed the submenu items colors, but that’s not affecting it. Does it have to do with the Elements I’m using?

Thank you very much for your help so far.

[Tom]

The dropdown should use the color options inside Customize > Colors > Primary Navigation.

Let me know 🙂

[Daniel]

Ah – I was trying to adjust the submenu items, since the entire thing was a dropdown, but I made sure I adjusted the primary nav items and that seems to have done it.

Thank you so much for all your help, I really appreciate it.

[Author]

Posts