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