Pure CSS Sticky Header - Navbar Fixed Top After Scrolling - No Javascript

Enroll My Course : Next Level CSS Animation and Hover Effects

Another Course : Build Complete Real World Responsive Websites from Scratch
------------------
Join Our Channel Membership And Get Source Code Everyday
------------------
Please LIKE our Facebook page for daily updates...
------------------

Music Name : Spring In My Step by Silent Partner from YouTube Audio Library

[mileshdesign]

tldr:

.nav { position: sticky; top: 0; }

[GregRickard]

So...apply "position: sticky;" to the nav element. That's all I needed.

[sylvanusedi]

this is the first time writing a comment on a youtube channel. This video has saved my grade and I am grateful

[JStack]

I really needed the initial styling. I see a lot of other comments did not appreciate it but I very much did!

[ARTICFRST]

for some reason I had position sticky; and top 0; but my nav was jumping. I just changed to 0px and it works smoothly now. thanks lol

[laitongarcia]

Muito bom seus exemplos. Já repliquei muitos em sala. Parabéns.

[perpetualnegativity]

Excellent solution, but 11 minutes for a couple lines of code is excessive:

nav {
position: sticky;
top: 0;
}

May need the use of "!important" on position as well as a z-index

[gabiold]

Good, except that most of the video is not about the stiky navbar. That was just 2 lines of CSS.

Please do not use <section> for just everything instead of div. In this example, the bg image on the top and bottom is definitely not a section, it is just a styling item. It does not hold information, you probably would want to hide it if you print the page. Use div here. Use section where you have a well-defined content which adds logically separate information (than other sections) to the page. You can use <article> if the content in itself (when ripping out of the rest of the page) still stands on its own. Wiki article, news article, blog post, etc... Probably you instead want to use sections inside articles to separate major things, like chapter in a book. Try to style your pages for black and white printing, like what would you want to see on paper if it would be other's website. Or read it on phone to somebody. You will instantly realise which are the important content and which are there just for the look.

[sanilk]

Easiest way to make nav bar/navigation menu. Good work👍👍

[youngdingle]

Spends like 2/3 of the video setting up the html and basic styling. Skip to 6:30 if you don’t like having your time wasted.

[simonestic]

i think when you're using flexbox, instead of FLOATING every element left or right you should use
justify-content: flex-end; || justify-content: flex-start,
this way you can separate one element from the others with for example:
.navbar ul li:nth-of-type(1) {
margin-right: auto;
}

[randomicallyrandom]

TY VERY MUCH MAN, I LOVE YOU FROM NOW ON

[audiocologne]

Thank you very much, it's very helpful.

[kanchankhl]

Wow
Great
Simple
Easy
Fabulous
Splendid
Love

[growthinspiration]

this should have been a 5minute video, but i did get the help that I needed

[mangabias]

i love u, thank you so much for helping beginners like me 😍

[domniquemerricks]

This worked for me:
.navbar {
position: fixed;
top: 0;
width: 100%;
}

[SirChogyal]

Unlike this tutorial, is there any way that we can scroll the fixed header up? Fixed header help me to fill the left and right space in any screen sizes. Thanks!

[meishappy.]

thanks a lotformaking this easy and creative vid

[leandrocandido]

Nice video. But I have a question. How can I change de color of the menu when I go to another section?