Question on Navbar overflow / expand behavior

Design help General
1

Hi Webflow people!

First time asking a Q in the forum:

I’m working on my nav (fixed vertical bar on the right of the viewport). The Navbar has two main parts in it: a main menu with its own small dropdown, and a small separate menu in its own div block at the bottom of the navbar wrapper. My goal is to be able to expand and collapse the main menu of links using the menu button/icon (even on desktop) while keeping the bottom div of links visible all the time. In this scenario, I want the separate, bottom-most div with a few other links inside it to stay below the expanded menu of main links above it, when that menu is expanded. The issue is that the main menu of links expands under the bottom div when it’s open. I think this is because the collapsible Webflow navbar element is set up to allow links to overflow out of the bar for typical mobile configurations across the top of the device on mobile, but I don’t want that. I tried changing the position and overflow settings, but nothing is changing.

If there’s some other setting or combination of settings I need to adjust to keep the main menu links above the submenu div at the bottom, I’m all ears! Or, should I just do this with a dropdown instead? I prefer to work it out with the navbar, if possible.

Thanks in advance for any help,

Here is my site Read-Only: Webflow - CSS Dollhouse

2

That will be messy to do with a standard Webflow nav. It’s designed to work as a pop-up navigation over top of the page, so in hamburger mode, that content is at a different z-index.

It would be difficult to achieve a fix frame beneath that, with an expandable area, etc.

I’d step back and reconsider how you want navigation to work both on desktop and on mobile.

It sounds like you probably have two separate navs, one that’s desktop-only and not based on a Nav element at all. You could use interactions to expand/contract the menu panel ( no overlay, no z-index ), or you could just have it always expanded.

The other which is mobile-only, and probably uses a standard Webflow nav for the hamburger capability.

1 Like
3

navbar goal
navbar goal410×1582 103 KB

This is an image of the desired stack inside the navbar.

4

Thanks for your insight.