How do I create a mobile specific menu?

Hi there,

David provided a workaround solution here:
https://generatepress.com/forums/topic/separate-mobile-menu-full-screen-off-canvas/#post-880244

More info on the hide-on classes:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Hi Leo, I have been able to create a mobile-only menu following the instructions on those links. However, the menu looks terrible because I cannot change the background colour of the slide-out menu on mobile devices. I was able to do that on the off-canvas menu.

For example, on the off-canvas menu I was able to make look like this https://prnt.sc/uqv6d4 and this when hovered over menu item https://prnt.sc/uqv6kq

I don't need a menu as nice as the example in the links above. I would be happy as long as it was easily visible. Right now, I have a small menu against a white background and you can barely see it.

Could you tell me what I would need to do to adjust the appearance of the mobile menu?

Thank you so much.

Any chance you can link me to the page in question?

Here you go: https://tinyurl.com/y7smpzu6

Out of interest, how do I update my profile picture on this forum? I have an image on Gravatar and it didn't pull that. Also, I couldn't find an option to upload a profile image even when I when to edit my profile. The profile image is, not an important thing.

Thank you, Leo.

Sorry so you are not going to use the off canvas navigation on mobile or it's currently disabled right now?

Hi Leo, I have the off-canvas menu enabled on desktop only. This is because I want to use the off-canvas menu for school subjects.

With your guidance, I have been able to create a menu visible just for mobile devices but that menu displays really bad as you can see in this screenshot taken off my phone: https://prnt.sc/urg3ii

Do you have a solution for this - please?

Are you currently setting the navigation color to be transparent in the customizer?

If so can you choose a solid color instead, then set the transparent color in the merged header element?
https://docs.generatepress.com/article/header-element-overview/#navigation-colors

Hi Leo/Support, I have given up on the mobile menu for now. I am using the off-canvas menu for mobile instead, which will do for now. I'll tackle the problem when I have more time to dedicate to it at some point in the future.

I am closing the thread for now. Thank you.

Did my solution above not work for you?

Let me know if you need another look :)

We will be here.

Based on what I could see changing the background colour on for the menu in this theme would look bad if I had to do it for mobile and desktop. It would look good if it was just for the mobile like it is on the off canvas menu. I didn't know how to change the background colour just for the mobile menu. I tried to play with various settings and had no success and it was taking up far too much time.

What happened when you use this solution here?
https://generatepress.com/forums/topic/how-do-i-create-a-mobile-specific-menu/#post-1468142

It should work as far as I understand.

Happy to take another look if you decide to go back to this route again :)