(dropdown) overlay on top of parent

Hi,

I’m trying to make a clickable (click to show) menu-overlay on a navigation bar while keeping the parent visible in the foreground with some design changes.

I may have solved it with a show/hide interaction by putting the overlay outside of the parent. However, as I want to make the entire navigation bar a symbol, I would prefer to keep it as a child.

This is what I’m trying to achieve:

And:


Here is my site Read-Only: [LINK](Webflow - The Economist)
(how to share your site Read-Only link)

Hey Andy, Take a look at Raymmar’s mega menu in this template.

It could be an option for your use case. I’m a bit swamped and have not tried it, but if you use his menu as a starting point and then add an interaction trigger to change the background color of your navbar when the fly-out menu opens, it should be close to what you’re looking for.

Thanks for your reply Marcel.

However, Marcel’s design doesn’t solve the problem I have. Perhaps I wasn’t detailed enough in my explanation of it…
I can create the fly-out menu as an overlay but the main issue is that I want one of the elements (the navigation bar) which is covered by the fly-out menu to come to the foreground (while keeping it’s position in the viewport).
If you look at my screenshots, the entire navigation bar remains in the same spot (although with different styling). Also note the bg color of the overlay covers the entire width of the viewport and the area above the navigation bar, while the navigation bar has a max-width and top margin.

Maybe I need multiple interactions?

  • Change styling on the nav bar.
  • Changing the padding and background color on the section.
  • Show/hide the fly-out menu (which then ca be positioned under the navigation bar)

This solved it, although with quite a few interactions. My classes could be cleaner though, so that could possibly save one or two interactions.

I’m still interested in hearing other suggestions if there are any…

Great, looks like you got it figured out. I think we both ended up with a similar end result, using slightly different methods. - LINK

1 Like

Yeah, not far off. Thanks for sharing