[Resolved] How do I create a mobile specific menu?

[Ryan]

Hi, I am using the Digital Creative theme (Elementor). I know I can use the Off-Canvas menu to create a menu that appears on mobile devices like this https://prnt.sc/uqs5c0 and https://prnt.sc/uqs5oq. However, I wanted to use the Off-Canvas menu for something else on the desktop.

So, I would like to know how I can use my main menu to create a menu like the one in these screenshots https://prnt.sc/uqs5c0 and https://prnt.sc/uqs5oq without using the off-canvas menu option.

Separately, is this forum only for paid GP members?

Thank you.

[Leo]

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

[Ryan]

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.

[Leo]

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

[Ryan]

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.

[Leo]

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

[Ryan]

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?

[Leo]

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

[Ryan]

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.

[Leo]

Did my solution above not work for you?

Let me know if you need another look 🙂

We will be here.

[Ryan]

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.

[Leo]

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 🙂

[Author]

Posts