Sticky Navigation Bar On Scroll Using Vanilla Javascript | Fixed Navbar on Scroll

Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...

[@top10information25]

You are making the code more simpler than others. thanks for making things better, easier, and simpler.

[@fernandocoelho8791]

A true life saver. Thank you for this tutorial!

[@gl5717]

Responsive menu bar...
The author is using flexbox in the video. To make it responsive you can start playing with css code like below. Then just remove "display: flex;" from the original header{...} and header ul{...} code sections.
In the code below: If the screen is smaller than 768px, the menu items will stack vertically, else they will be horizontally in line. You can test for more sizes to be more specific when it comes to cell phones and tablets, etc.
@media only screen and (min-width: 100px) {
header, header ul{
display: column;
}
}
@media only screen and (min-width: 768px) {
header, header ul{
display: flex;
}
}

[@MrArmyzero]

that one u can just adjust to max-width 767

[@klaasjanssen644]

thank you so much, this was exactly what i was looking for, small simple JS projects, with great results! it helps me really a lot. thanks again :D

[@justmentyou]

easy to use and make, tried from other youtubers but smth didn't came out, but after this video i made it. plus as a bonus there is a small piece of animation.
thanks a lot

[@dswp872]

Seems simple but beautiful and lightweight. Thank you.

[@farhanalfatah436]

Dari indonesia ?

[@adnan8465]

just like you

[@imjordanhubbard1459]

Incredible tutorial pal... thank you so much!

[@mono_drift]

Finally something I wanted! :)

[@polartitangaming1887]

For those having issues with initial transition. I had the same issue. Just make sure the transition effect is in the right area of the CSS code. I kept putting it in nav when it needed to be in nav li. At least for my code it did. Hope this helps!

[@chaitalinirgun1426]

Means, where we have to put this

[@lonewarrior2445]

@@chaitalinirgun1426 In "nav li"

[@satishchakma7555]

@@lonewarrior2445 Thank you. It worked. But can you please explain why it doesn't work on nav? Thank you.

[@TonkFearsWomen]

sir people like you are the reason the internet is a good place ty

[@nguyencongquoc4436]

This is what I need. Thank you

[@adictade]

I have bin searching for this sticky nav. it is damnn helpful. Thank U so much. :+1

[@jatulkumar9568]

background music sun k nind aane lagri hai great work man :)

[@le_seducteut_timide]

The way he combines Html, Css and javascript is just so clean

[@AI_Elbaz]

I think there is some repeated code in css, but the video is very helpful and simple.

[@KaranPadaliya-nb1yf]

Finally something I wanted! :)
Thank you

[@Ayoub_Himself]

Thank you for the tutorial, really helpful!

[@SabirsCreation]

Wow unbelievable in 3 minutes I salute you

[@olujobifolaranmi2133]

Great one, you did a good job. Thank you for this.

[@siegfrieddallanzabader]

Unfortunately I am not a creative person even though I am a front-end developer but I can make-up with this lack watching your videos and your coding. So thank you very much sir.

[@OnlineTutorialsYT]

Welcome bro :)

[@donsonthewise]

same here lol

[@theultimatecoder3433]

same 😭😭

[@adityaraut7]

Sir mai appse contact karna chahta hu

[@adityaraut7]

@@donsonthewise sir college me full stack developer ke liye vaccancy Ari rhti hai
To sir apne kaise job li ye puchna hai
To sir ap apni mail id batayiye please

[@codingwithobidjon1193]

Very good, thank you. I was looking for this for a long time😃

[@lucassouzasilva6842]

Straight to the point very useful

[@rain0sana]

Simple and understandable tutorial 👍

[@alimy.5275]

Thanks man, you helped me out a lot! God bless you

[@jamesmartinez9069]

Online tutorials: Muchas gracias por su generosidad al compartir admirable conocimiento

[@tarcaumarius9228]

THE BEST TUTORIAL EVER LOVE YOU MAN

[@strongmatter]

AMAZING!!!! THANK YOU !!!!

[@muzaffartursunov1946]

i really love online tutorials thanks aaaallllooottt

[@danielkristensen5296]

Crazy simple!
was a big help

[@nanotech7431]

Thanks sir you save my life 👍

[@hariommourya2436]

You are my inspiration sir

[@iamhtmldeveloper]

Thank You bro for making videos for us :)

[@SumoCumLoudly]

a video of speeded up typing, amazing

[@user-eo7en6ec1o]

follow you from Egypt . You are the prof of web.

[@solomonakpas]

So accurate and precise. Thanks

[@bayudarmawan9220]

AWESOME!!! THANKYOU BRO!

[@adaopedro2544]

Straight to the point!

[@echsfreshman]

You made it so simple thanks player

[@79jdv79nam]

I have suggestion to showing us how to make it "responsive" (if it's possible). Your works are great man!

[@MakingMoneyWithMichael]

Oh, it's possible :) Look into CSS @media queries.

[@uthsarakawmini9793]

its really helpful to me as a beginner

[@ceylaan5466]

wow this is so good thx man ❤

[@katalinalagosneuman5593]

Very good videos, I hope to see many more greetings.

[@servercetin]

Awesome tutorial. Thanks...

[@suspiciousstick6310]

I know you are getting less views but please keep going it really helps a lot.....😎😎

[@_PhanSiHoang]

Your video very useful, thks a lot

[@geraldhaboc5601]

sorry I have an error. thank you for your wonderful tutorials

[@shivpatel5991]

Epic thank you

[@conrad9261]

This is really helpful

[@Zoejohansendk]

So far so good: Now a question! How do I make the header, start as it’s own box/bar with color background, but NOT being on top of the image. But when scrolling down, it loose the background color, and goes on top of the underlying cover image and the rest of the page? ☺️

[@gilbertoj.3507]

music: akashi ghandi White river

[@GastonCassinaAllendes]

great! thank you!

[@techbeast829]

thank u so much,,,, u saved the day

[@rojasjahiker]

Thank u!!! you've save my life!

[@greybluesea]

amazing, thank you so much!

[@andreo5027]

incredibly great video

[@ducthuy6685]

Amazing!!!

[@psdzone]

You're magic bro

[@sionsebastian2501]

looks amazing

[@shahagamer8948]

Hello From Uzbekistan❤🇺🇿

[@farruxeshboev9788]

thank you very much bro!!!!

[@ahmadwildan4259]

Thank you so much, this was exactly what i was looking for, small simple JS projects, with great results! it helps me really a lot. Good job bruh :D

[@trishansaha8485]

very helpful thanks a lot

[@dangminhtai]

Love it

[@shahabzafarinobari4156]

Love it

[@angelesyo7076]

I really like all your videos, and about all this one. Unfortunatelly, it was not responsive

[@bLitzKinG20]

Thank you so much!

[@us28363hdhd]

Thank you so much ❤️

[@gimhanrasanjana9578]

Awesome!!

[@princeessien5828]

Thanksgiving for this video

[@_arunkmr_rr]

great!!

[@fabiobaziota5919]

Amazing thanks...

[@user-zp9iq1po5o]

Exciting!

[@abaskisekka5137]

It was so amazing

[@tinsalada]

thanks a lot

[@chaitalinirgun1426]

Thanks alot 👍🏻👍🏻

[@mohabedr5030]

I love it

[@ragab0]

عمل ممتاز
Good job.

[@therock3718]

Thanks very much

[@gixxerblade]

position: sticky; also works really well.

[@OnlineTutorialsYT]

Yes bro...

[@dawidepl7807]

@@OnlineTutorialsYT I think he didn't get that it's mostly about that cool effect

[@saumyaagarg4299]

@@OnlineTutorialsYT sir can u pls provide me with the bg pic?

[@chiragsaini2314]

hey the thing is that , when you apply position: sticky , you need to tell it when to be sticky , so set the top:0 in the same div , i hope that's gonna help , as it did help me.

[@taric1664]

@@chiragsaini2314 for me isn't working, could you help me? my menu is not turning white

[@alejosandu]

Really cool

[@user-ql2bc2gy5g]

masha allah so helpfull video

[@Beautiful.Nature.7736]

thanks for this

[@ijohntogun]

God bless you bro

[@stardust_crusaders4381]

Brilliant

[@asifhossain2088]

Thank you!!!!!!!

[@dimaghabbash439]

thank you so much .

[@tranvuhoang7147]

thanks!!

[@WebDevdai]

thanks you

[@ranakhalid7577]

Plz tell me what should I do my script is not working even I write it very carefully and as it is as shown in video but still nav bar doesn't show any transition when I scroll down

[@armaanraval5048]

Thank you so much

[@amitkushwaha5763]

thanks bro

[@rajantandan9723]

Thank u

[@santoshmedok4781]

Thank you

[@pivotexpert9792]

Hello, I used this. it works fine. but I noticed when I take the variables used in this function as global variables and I go to borwser and scroll down to some where on the page, then I reload the page while I'm scrolled on that position. and then, after reloading when I scroll to the top the sticky class doesn't toggles.
But when I place the variables inside the function it self how you should in the tutorial it works fine.
Why this is happens? I'm really curious to know.
By the way. Thanks for giving us greate videos.

[@carandapple328]

Nice tutorial

[@juditcantosllavador7364]

thank you!!!!

[@romuloalves9349]

Ótimo vídeo parabéns 👌.

[@joaohoffman5613]

Um brasileiro :)

[@dueloFifa]

@@joaohoffman5613 oloooko 3 brs

[@joaohoffman5613]

@@dueloFifa sheeeeeesh ai s

[@sizanahmed9489]

thank you so much

[@jelly6656]

Thanks 😊

[@bmhdtama3257]

thanks,work

[@underworld-of-gaming]

Thanks ❤️

[@laiquemirza2407]

keep going bro and just don't be afraid to put your face and voice it will be good to se that