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