▼
Streaming live at 10am (PST)

Drop down menu help please

#1

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

Screen Shot 2016-09-26 at 6.22.37 PM.png881x507 44.9 KB
Screen Shot 2016-09-26 at 6.22.56 PM.png778x505 87 KB

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

#2

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.

#3

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...

#4

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

#5

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...

#6

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!

#8

First make sure the menu button is in an open state

Screen Shot 2016-09-26 at 7.58.53 pm.png3840x2400 512 KB

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.

Screen Shot 2016-09-26 at 7.59.07 pm.png3840x2400 571 KB

#9

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

#11

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

#12

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:

dropmenu.gif761x670 550 KB

Menu on published site:

pubmenu.gif882x703 653 KB

Thanks in advance!

#13

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

#14

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

#15

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/

#16

Thanks for your help Antonio, all sorted now. B

closed #17

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