[Resolved] Mobile menu design

[Verónica]

Hi Tom and Leo,

I’d like to replicate this menu on desktop, tablet and mobile version but after some tries I don’t get it. I’ve GP 2.0.2 and Elementor. After spending more time trying to achieve it, do you know if it’s possible?

This is the web with the menu I’m trying to replicate.

https://www.faunayflora.es/

Thanks a lot in advance!

[Leo]

Hi there,

Just to double check, do you need help in all three mode? The title says mobile only.

For desktop, are you looking to merge the hero image with the navigation?
If so this should help: https://docs.generatepress.com/article/merging-header-navigation-content/

Let me know 🙂

[Verónica]

Hi Leo! Thanks for your answer! Yes, you are right! Although the title says “mobile” I’ll appreciate very much if you can help me with the two version: desktop and mobile (they use the mobile version for tablets and phones).
I’ve followed the instructions you’ve provided me for the header (I’ve applied it in the home page), but it’s empty.

Thanks so much for your help offer.

[Leo]

Do you have page header disabled here?
https://docs.generatepress.com/article/disable-elements-overview/

[Verónica]

Hi Leo,

No, it’s enabled. Here you have a screenshot of the home’s configuration

https://imgur.com/a/hIaCX

[Leo]

That’s the page header metabox.

I’m talking about the disable element metabox.

Please check my link above.

Let me know.

[Verónica]

Apologizes Leo, maybe you are thinking I’m blind or that I didn’t read your answer, but I read it and read it again now and also I watch the video, and the screenshots I sent you were about the sections the article talk about :|. There are two images: the first from the disable element metabox and the second for the header selected. If it’s neccesary I can provide you my user and password to check it directly on the administration dashboard.

Kind Regards,

[Leo]

Ahh sorry I didn’t know there are two images.

However, in the screeshot, the featured image/page header is checked. Unchecking it should fix the problem.

[Verónica]

Yes! You were right Leo :)! I thought that Header was enough. I need to relocate the slider now, but yes.
And now that the menu is merging with the page header, can we achieve the same behaviour as https://www.faunayflora.es? They are using the mobil menu for tablets and mobiles width the logo centered and search and cart in the menu instead at the right corner.

Thanks a lot!

[Tom]

The desktop version should be achieveable by using the Navigation Logo option, instead of the centered logo you’re using now: https://docs.generatepress.com/article/navigation-logo/

Then on mobile I suggest using the Mobile Header option, which we can then adjust to have the logo centered and mobile menu on the left. Let me know when you set this up and I’ll give you the CSS 🙂

[Verónica]

Thanks Tom!

All done!

Thanks for your help!

Kind Regards!

[Tom]

You’re welcome! 🙂

[Verónica]

hi Tom! Apologizes, maybe you misunderstood my All done ;P! I still need your CSS ;P. I’ve done the mobile header option but the behaviour is not the same as the one faunayflora.es have.

Apologizes for the misunderstood

[Tom]

Ah! Sorry about that.

Your desktop site seems to still be using the logo as a menu item. If you want it to look like the sample site you sent, you’ll want to remove that menu item logo, and add it as a navigation logo.

There’s also quite a bit of custom CSS which is conflicting with the mobile header. Is there any way we can save that custom CSS elsewhere and then remove it for now? It will help us get to your desired layout a lot quicker 🙂

[Verónica]

No worries! Thanks to you for your help!

I’ve just removed the logo from the menu and added it as a navigation logo (https://imgur.com/a/AFSLUuc)

Yes, of course, I can remove the CSS. Do you want me to remove all of them or only some classes? Let me know and I’ll do it!

Thanks again!

[Author]

Posts