[Solved] Is it possible to make a side navigation bar that overlaps the content using just html and css?

Answer 1

yes, you can float the navbar left or right, use absolute or fixed positioning and play with the z index to make sure no content overlaps it. examples below

.nav{
float: left;
or
position: absolute;
or
position: fixed;
and
z-index: 10;
}

Answer 2

Ceektah🗡️
Do you want the nav-bar to be always on the top of the content?
Then how can one access the content that's behind the nav-bar?

Answer 3

you typically don’t want content under your navbar. its better to use a float or position: relative so content flows around it

Answer 4

Edilson Espinosa OK, I'll check it out, thanks for your help

Answer 5

Ceektah🗡️
I have done a "hamburger menu" once(on CodePen).
https://codepen.io/hanumaukkadapu/full/mdbardX

The nav bar opens and closes on clicking a button.
You can change the trigger to be hover on the nav. But on mobile, I guess swiping gesture would the best one.

Answer 6

Hanuma Ukkadapu I want it to be open and close on hover

Answer 7

Edilson Espinosa Thanks I'll try it

Answer 8

https://code.sololearn.com/Wop6T28pgAEA/?ref=app

starter code. doesnt work in solo learn, youll have to test it on another platform.

set nav opacity to 0 and remove background color. when a user hovers over invisible div it will move the nav bar into view. any links you place under the bav still wont work though because itll just pop out the nav bar.