+ 3

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

8th Jul 2020, 1:46 AM
Coded Writer ⚔️
Coded Writer ⚔️ - avatar
8 Antworten
+ 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; }
8th Jul 2020, 3:02 AM
Edilson Espinosa
Edilson Espinosa - avatar
+ 1
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?
8th Jul 2020, 3:59 AM
Hanuma Ukkadapu
Hanuma Ukkadapu - avatar
+ 1
you typically don’t want content under your navbar. its better to use a float or position: relative so content flows around it
8th Jul 2020, 4:17 PM
Edilson Espinosa
Edilson Espinosa - avatar
+ 1
Edilson Espinosa OK, I'll check it out, thanks for your help
9th Jul 2020, 4:24 PM
Coded Writer ⚔️
Coded Writer ⚔️ - avatar
+ 1
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.
9th Jul 2020, 4:38 PM
Hanuma Ukkadapu
Hanuma Ukkadapu - avatar
0
Hanuma Ukkadapu I want it to be open and close on hover
9th Jul 2020, 3:12 PM
Coded Writer ⚔️
Coded Writer ⚔️ - avatar
0
Edilson Espinosa Thanks I'll try it
9th Jul 2020, 3:13 PM
Coded Writer ⚔️
Coded Writer ⚔️ - avatar
0
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.
9th Jul 2020, 4:17 PM
Edilson Espinosa
Edilson Espinosa - avatar