How to make a sticky nav bar | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 3

How to make a sticky nav bar

I was making a nav bar and I want it to remain on the page while scrolling I want to know how I can do it.

27th Apr 2020, 2:23 PM
Mrityunjay
Mrityunjay - avatar
8 Answers
+ 3
Set position to sticky or check out this example https://code.sololearn.com/WWvUQyEnohm5/?ref=app
28th Apr 2020, 7:42 AM
francis uche
francis uche - avatar
+ 4
position:fixed;
29th Apr 2020, 12:54 PM
Mehnaz ✨
Mehnaz ✨ - avatar
+ 3
use position fixed /sticky
27th Apr 2020, 2:25 PM
durian
durian - avatar
+ 2
Lily Mea I have a header/logo above the nav bar, so when I use it, it does not remain on top
27th Apr 2020, 2:35 PM
Mrityunjay
Mrityunjay - avatar
+ 1
Hi, You can use css property position is equal to fixed. example: .classname{ position:fixed; } Refer following: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
28th Apr 2020, 7:01 AM
AjayGohil
+ 1
https://code.sololearn.com/Wbat8raAIZ2R/?ref=app
3rd May 2020, 6:11 AM
Calviղ
Calviղ - avatar
0
Mrityunjay🇮🇳 you can wrap your nav and header/logo in a div. Then apply Lily Mea said
27th Apr 2020, 3:00 PM
🇮🇳Vivek🇮🇳
🇮🇳Vivek🇮🇳 - avatar
0
use position fixed and relative
27th Apr 2020, 3:30 PM
KASH
KASH - avatar