Actually, the whole video is a miserable waste of time. No explanation, no demo link, no reference to the relevant part, just a painfully long and boring recording of someone building a web page. The whole thing could have been replaced with a still frame showing nothing else but position: sticky and top:something, and it would have been 1000000 times more useful.
Good, except that most of the video is not about the stiky navbar. That was just 2 lines of CSS. Please do not use 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 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.
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; }
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
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!
hey , nice vid. please don't let the negative ppl discourage you! that being said i have 1 issue . all works fine on my pc but wen on mobile my navbar doesn't stick. please advise
@@user87546 I think the possible answer is the sticky behavior. It works like fixed when scrolled but will not overlap the content anyway. just give it a top: 0 after specifying the position: sticky;
Why is it opaque when it is normal, but when it is sticked on the top it is translucent. it looks like it has a black background, but i haven't seen you adding one. mine is just always translucent. Can anyone help.
tldr:
.nav { position: sticky; top: 0; }
You Legend.
Thx
@Salomka 🤦♂️
DUUUUUUDE!!!!!! amazing!!
This. Thanks man, you're the real MVP
So...apply "position: sticky;" to the nav element. That's all I needed.
yeah i also only want that element
lol.. still, I learned a lot
But nav HAVE to be directly inside body
With position you have to add below top: 0;
this is the first time writing a comment on a youtube channel. This video has saved my grade and I am grateful
:)
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.
its not time waste bro...
Actually, the whole video is a miserable waste of time. No explanation, no demo link, no reference to the relevant part, just a painfully long and boring recording of someone building a web page.
The whole thing could have been replaced with a still frame showing nothing else but position: sticky and top:something, and it would have been 1000000 times more useful.
the real question is, is het quicker to copy and paste 'nav' than just to type 'nav'
@@aditsu if you have any direct query than google it.
Why you here to search it on youtube.
@@trideepsardar2266 I found the video from a google search
I really needed the initial styling. I see a lot of other comments did not appreciate it but I very much did!
nice man it works, something finally from youtube tutorials actually works with my projects !
Good, except that most of the video is not about the stiky navbar. That was just 2 lines of CSS.
Please do not use 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 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.
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;
}
or space-between
hey, thank you so much for this comment man!!
Easiest way to make nav bar/navigation menu. Good work👍👍
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
Hilarious. Your code worked instantly for me. Thanks for saving me 11 mins. +1 one to the vid too for giving out the solution
this should be pinned for everyone
I have a problem with position sticky. After some scrolling navbar doesnt stick. Please help it would mean a lot😊
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
Thanks very Very Thanks So Much
that's why I have subscribed to your channel
position: sticky;
top: 0;
There you go.
Best knowledge in your videos
This worked for me:
.navbar {
position: fixed;
top: 0;
width: 100%;
}
Wow
Great
Simple
Easy
Fabulous
Splendid
Love it.......
i love u, thank you so much for helping beginners like me 😍
this should have been a 5minute video, but i did get the help that I needed
to anyone interested, add some margin-top extra to the content below your navbar, doing this you'll prevent overlay your main content (position:fixed)
How would that remain constant through different screen sizes?
you just saved me 11 minutes my friend
Thanks man ❤
helped a lot tysm even though i am late still appreciated
Bro agr pehli wali img ki position fix kar skte hai
Your tutotial is best
TY VERY MUCH MAN, I LOVE YOU FROM NOW ON
nav. {
position: sticky;
top: 1px;
z-index: 998;
}
skip to 9:58 to save time.
Can we do it on blogger also
do the buttons work
Would this work for side bar when viewed from a phone ?
Me hearing the background music: "Is this a webdev tutorial or are they releasing another Winnie the Pooh movie?"
ha-ha-ha
It's about position:sticky
You man, same name😂
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!
Very helpful.. Thanks mate!!!
Music of My talking Angela...😎
hey , nice vid. please don't let the negative ppl discourage you!
that being said i have 1 issue . all works fine on my pc but wen on mobile my navbar doesn't stick.
please advise
Muito bom seus exemplos. Já repliquei muitos em sala. Parabéns.
Tell me any plug in you use. Thanks
You're a best of the best
Can i apply this with dropdown menu?
Thank you. Can someone please tell me how i can shrink the logo ?
Same I have no idea
Really Helpfull and nice tutorial..
How to download osm pictures for web like you use
Nice video. But I have a question. How can I change de color of the menu when I go to another section?
thanks a lotformaking this easy and creative vid
Great! I really like this channel!!
Thanks bro
Nice video bro keep it up
how to make the logo show on the next scroll too?
Coool thanks pal...really help me....
thanks bro señor vale will be proud of me+
awesome, bro
When I link to different sections the nav bar covers it but I want to place that covered things just below the navbar. How can it be done properly?
I need this answer !!! How is it possible that no one asks this?
@@user87546 I think the possible answer is the sticky behavior. It works like fixed when scrolled but will not overlap the content anyway. just give it a top: 0 after specifying the position: sticky;
Wow thanks...✌🙌🏁
Position sticky is not supported for all browsers
very informative video
It's so simple!!
Why is it opaque when it is normal, but when it is sticked on the top it is translucent. it looks like it has a black background, but i haven't seen you adding one. mine is just always translucent. Can anyone help.
I want to add shadow-box to nav when it scrolling down, but I don't know how
Aapka page respondive backgrounds hai kya jo aapne image lagaye hai wo strach to nhi hota hai n...i think your backgrounds image is strach..???
wonderful explanation , thanks
Thnaks you, very usefull video men...
Can i have the copy of the syntax of this video about nav bar?
You are Pro.
Why did u do the body styling first then the sticky header later¿¿
position sticky not work
don't forget to add {top: 0;}
@@adedimolao9094 what if it not working even with that?
My nav bar gets no hover action. It just has all blocks highlighted in red. Any help?
nice one
Yes! u r a pro ! ♥
i'm not pro
@@OnlineTutorialsYT true. your a noob
So Helpful !!
why can't i do; box-sizing nor height ? like it doesn't have the defination
Thanks brother.. from Türkiye..
very helpfull video..
Thanks:)
How to clear default padding or. Margin
*
{
margin:0;
padding:0;
}
@@OnlineTutorialsYT thanks
@@OnlineTutorialsYT please make us understand this codes
WOW! I like!
il a pas le code source sur c'est vidéo?
it doesn't have the source code on it's video?
Thank you very much, it's very helpful.
1rem == how???
position:sticky and top:0; don't work, where is the problem?
why my sticky nav gone on the second section
same here, did you manage to figure it out?
@@canvasbykaya on CSS, change the position from sticky to absolute.
@@irzazain7782 thanks! i'll try that :)
nice
To people who's gonna watch this video, to save your time just add {position:sticky , top:0} in ur nav. Don't waste ur time ;)
amazing !
i am unable to see the changes made in css folder pls someone help!
I'm not able to insert the image into background section.sec1 :-(
loved it
je vois pas le code source de cette vidéo
I can't see the source code of this video
it's cool
And the code? or is it a video to see how you write?
pictures link?
sticky nav 9:45
Contact ka link kaise add kre
how to responsive this sticky bar please help. Give me the source code.
Bacano bien good exito desde colombia
thank you so much
it works well, but my navbar pass behind images, so its been covered by the images. pls help
same here! i've been trying to figure it out but idk whats wrong :(
@@canvasbykaya change the z-index to 100
@@kvazaios5026 thank you, i'll try that :)
its not working nav{position:sticky;top:0;} why ??
bestest song
Thanks a lot,,,,,
problem solved at 9:38
Good sir ji
any codepen link