Having Trouble with a Vertical Sticky Navbar

Trying to make a Sticky Vertical Navbar but when I set the Position to Stick, the Navbar extends the site by sitting on top of every other element (like one Div over another) instead of floating above the elements like I’m wanting. Anyone got any advice ?


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

Hey, Channing! You had a z-index defined on the navbar element, which is telling it to sit on top of everything, since it’s technically the highest z-index defined. Resetting this back to auto stops it from stacking on top of your other elements. Does this take care of it for you?

Just tried it and it and no, it’s still sitting over it on the Y-Axis no matter what I do to the Z Axis. Oddly enough setting the Z-Axis to Auto makes it sit under everything else along the Z-Axis.

Also in case it’s not clear my problem isn’t that it’s sitting on top of everything on the Z-Axis. The problem is it’s sitting on top of everything along the Y-Axis.

Hey Channing,

You should create a wrapper for the content on the right and put everything except the nav in it. Then put flexbox (horizontal) on the parent (Desktop Site Div), to put them side by side.

Your structure will look like this:

Desktop Site Div

Vertical Navbar
Wrapper

Top Section
Story Section
Return to Top Div
Footer

Your nav will stay on the left and you can scroll through the content on the right. And they won’t overlap.

Hope this helps :slight_smile:

1 Like