Streaming live at 10am (PST)

Drop down menu help please

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

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.

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…

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

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…

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!

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.

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

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

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!

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

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

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/

1 Like

Thanks for your help Antonio, all sorted now. B

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.