Drop down menu help please

[76kid (Benjamin Anthonisz)]

I’ve put in a navigation drop down menu and in the ‘Designer’ it renders how I want it to. But when previewing or published the drop down slides in under the nav bar, which is transparent and therefore shows the hero banner. There’s also a grey box under the hamburger menu which appears when clicked - again I cannot find the reasoning.

I have attached a screen shot of in ‘Designer’ and published so you can see the difference. Preview link also below.

I am stumped and would really appreciate any help.

Thanks in advance.

Benjamin

---

Here is my public share link: https://preview.webflow.com/preview/wearepug?preview=ab4304a6f55e7949943fcb6cb10f4c19

[GourmetPixel (Darren Lynch)]

Hi @76kid I had a play around, I found that if you set the position of the Drop Down Menu as Fixed and give it a top padding of like 80px it seems to do what you want it to. Only issue I can see is the text from menu buttons animate under your main logo as the menu comes down.

[GourmetPixel (Darren Lynch)]

Ahh… sorry @76kid I just noticed this also causes another issue. If you open the menu and then scroll, it stays there and the titlebar buggers off…

[76kid (Benjamin Anthonisz)]

@GourmetPixel It’s a tough one. Thanks for trying any way.

[GourmetPixel (Darren Lynch)]

Sorry…
Another thought I had was making a black div that is the same height and full width as your navbar - position absolute within navbar.
Set it’s opacity to 0%, then put an interaction on the menu button to make 100% on the first click, then 0% on the second click.
This worked, but I haven’t had time to solve the issue of if a user clicks off the menu. The menu closes but the black div won’t obviously fade back to 0%. Perhaps another interaction on the main body to hide him…

[76kid (Benjamin Anthonisz)]

What I don’t understand is how the drop down menu can be hidden behind a transparent section.

I’m sure there’s a simpler reason for this. Like the z-index or similar.

Really bazaar!

[CooperX (Juxta)]

First make sure the menu button is in an open state

Once open go back to the style panel for the menu button, the class should be appened with “Open” - scroll down and change the background color to transparent or whatever color you like.

[76kid (Benjamin Anthonisz)]

Thanks for that @CooperX I just need to solve the drop down menu issue now.

[76kid (Benjamin Anthonisz)]

Nobody seems to know how to overcome this. Any other suggestions please or is it a bug?

[cyberdave (Dave Sloane)]

Hi @76kid, I was looking at the drop down and it seems to be working for me, what is the exact issue you are having now with the drop down?

Take a peek how it looks to me:

Menu in Designer:

Menu on published site:

Thanks in advance!

[76kid (Benjamin Anthonisz)]

Thanks Dave, the black drop down menu should be dropping behind the header (logo and hamburger menu etc).

Like in the example I emailed you: http://www.virginmobilemea.com/

Please come back to me.

Thanks for your help.

Benji

[cyberdave (Dave Sloane)]

Hi @76kid, I understand thanks, I am taking a look! Thanks in advance.

[AntonioBalderas]

I made a quick example you can start from here
https://preview.webflow.com/preview/ultra-awesome-f93a10?preview=c93da2efe5853d42d9496bbc9f6039c4

http://ultra-awesome-f93a10.webflow.io/

[76kid (Benjamin Anthonisz)]

Thanks for your help Antonio, all sorted now. B