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.
@@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
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
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; } }
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!
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
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.
Just set the poition of the nav bar in the CSS to "sticky" and the top declariotion to the point on the page where it should stick. So this is as easy as "position: sticky; top: 0px;". No JS needed.
Bonus points for adding padding-top: [height of the navbar]px; to the body of the page to stop the top edge of your page going under the header. Also, for animating any scrolling anchors, on-click, remember to offset for the height of the nav bar (this bit needs to be done via JS).
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? ☺️
The header content shifts to the top left corner of the page when I scroll to the home page. The JavaScript functions are working, but what did I do wrong to cause this issue? @Online Tutorials
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.
I get to make everything work except that cool sliding animation for header elements when you open the site first. I dont know whats wrong but here is my header css and I think everything is same header{ position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; transition: 0.6s; padding: 40px 100px; z-index: 100000; }
Yeah well, that looks great. How do you make it responsive tho? also I am used to do the navigation as not as ... so I am confused about how to style it inside of CSS in order to be responsive ... any thoughts? Thanks!
Hi i'm having trouble adding content to the page after finishing this code. I tried testing it using a simple H1 tag, where i put it above the tag, but that puts it above the navbar and i tried putting it below the tag but that puts it on the other page. I'm not sure where exactly i can begin adding content to the page. Please anyone who has figured it out, let me know how. I am new to coding and web-design and i need a bit of help
3:20 I have question .. I want to know difference between line27 and line32 line27 : header.sticky (no space between "header" and ".") line32 : header .logo (space between "header" and ".")
In line 27 header.sticky refers to the header element with a class of sticky. in Line 32, header .logo refers to a child element within header that has a class of "logo". 0:36 line 10 shows the a element with a class of "logo"
can u help me ? my ul is to much right an i copied the code from you i got 6 times Home and i only see 5 because the 6th is behind the wall. Thank you !
You are making the code more simpler than others. thanks for making things better, easier, and simpler.
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.
Welcome bro :)
same here lol
same 😭😭
Sir mai appse contact karna chahta hu
@@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
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
A true life saver. Thank you for this tutorial!
background music sun k nind aane lagri hai great work man :)
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;
}
}
that one u can just adjust to max-width 767
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!
Means, where we have to put this
@@chaitalinirgun1426 In "nav li"
@@lonewarrior2445 Thank you. It worked. But can you please explain why it doesn't work on nav? Thank you.
sir people like you are the reason the internet is a good place ty
I have suggestion to showing us how to make it "responsive" (if it's possible). Your works are great man!
Oh, it's possible :) Look into CSS @media queries.
I know you are getting less views but please keep going it really helps a lot.....😎😎
Seems simple but beautiful and lightweight. Thank you.
Dari indonesia ?
just like you
Hello From Uzbekistan❤🇺🇿
follow you from Egypt . You are the prof of web.
haven't tried yet but I think I got it, you make it look simple. Thanks.
THE BEST TUTORIAL EVER LOVE YOU MAN
Wow unbelievable in 3 minutes I salute you
I have bin searching for this sticky nav. it is damnn helpful. Thank U so much. :+1
will the nav still show even if there is a scroll to an object with "position: absolute"
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
Very good, thank you. I was looking for this for a long time😃
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
Straight to the point very useful
its really helpful to me as a beginner
God bless you bro
position: sticky; also works really well.
Yes bro...
@@OnlineTutorialsYT I think he didn't get that it's mostly about that cool effect
@@OnlineTutorialsYT sir can u pls provide me with the bg pic?
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.
@@chiragsaini2314 for me isn't working, could you help me? my menu is not turning white
i really love online tutorials thanks aaaallllooottt
This is what I need. Thank you
Straight to the point!
You are my inspiration sir
So accurate and precise. Thanks
Finally something I wanted! :)
Just set the poition of the nav bar in the CSS to "sticky" and the top declariotion to the point on the page where it should stick. So this is as easy as "position: sticky; top: 0px;". No JS needed.
Bonus points for adding padding-top: [height of the navbar]px; to the body of the page to stop the top edge of your page going under the header.
Also, for animating any scrolling anchors, on-click, remember to offset for the height of the nav bar (this bit needs to be done via JS).
what is the function of z-index?
in the vidio its make the nav bar sticky for the first time
@@diansyah7481 Z index is the placement on the z-axis. So something with a z-index of 10 would be in front of something with a z-index of 1.
This saved me a night's sleep
keep going bro and just don't be afraid to put your face and voice it will be good to se that
music: akashi ghandi White river
masha allah so helpfull video
Great one, you did a good job. Thank you for this.
Thanks man, you helped me out a lot! God bless you
Simple and understandable tutorial 👍
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? ☺️
Online tutorials: Muchas gracias por su generosidad al compartir admirable conocimiento
Thanks sir you save my life 👍
Crazy simple!
was a big help
You made it so simple thanks player
incredibly great video
Thanksgiving for this video
Thank you for the tutorial, really helpful!
AMAZING!!!! THANK YOU !!!!
Thank you so much ❤️
a video of speeded up typing, amazing
thank u so much,,,, u saved the day
the GOAT
sorry I have an error. thank you for your wonderful tutorials
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classlist.toggle("sticky", window.scrollY > 0);
})
Very good videos, I hope to see many more greetings.
You're magic bro
The header content shifts to the top left corner of the page when I scroll to the home page. The JavaScript functions are working, but what did I do wrong to cause this issue? @Online Tutorials
Incredible tutorial pal... thank you so much!
Awesome tutorial. Thanks...
Hi! Could you send me the code which when you scrol the page it will became white please?
yes i can bro, give me your accaount instagram or fb
con que version de bootstrap esta hecho?
Thank You bro for making videos for us :)
amazing yarr
amazing, thank you so much!
thank you very much bro!!!!
looks amazing
Thanks alot 👍🏻👍🏻
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.
AWESOME!!! THANKYOU BRO!
I get to make everything work except that cool sliding animation for header elements when you open the site first. I dont know whats wrong but here is my header css and I think everything is same
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
Yeah well, that looks great. How do you make it responsive tho? also I am used to do the navigation as not as ... so I am confused about how to style it inside of CSS in order to be responsive ... any thoughts? Thanks!
you can use any
I really like all your videos, and about all this one. Unfortunatelly, it was not responsive
very helpful thanks a lot
Nice tutorial
This is really helpful
wow this is so good thx man ❤
when did you use the vanilla javascript?? seems you not use any external file or CDN...?
Exciting!
Thank u!!! you've save my life!
Your video very useful, thks a lot
Awesome!!
can you provide link of that background image
Hi i'm having trouble adding content to the page after finishing this code. I tried testing it using a simple H1 tag, where i put it above the tag, but that puts it above the navbar and i tried putting it below the tag but that puts it on the other page. I'm not sure where exactly i can begin adding content to the page. Please anyone who has figured it out, let me know how. I am new to coding and web-design and i need a bit of help
Does it supports in asp.net..?
Yes
3:20 I have question ..
I want to know difference between line27 and line32
line27 : header.sticky (no space between "header" and ".")
line32 : header .logo (space between "header" and ".")
In line 27 header.sticky refers to the header element with a class of sticky. in Line 32, header .logo refers to a child element within header that has a class of "logo". 0:36 line 10 shows the a element with a class of "logo"
Wow awesome video I like ur video I am watching ur daily video I like it ur video can I get source code and background image
Thank you so much!
gotta hit that Settings > Playback speed > .25 for this one
Press 'Shift' + '' for faster video)
nice work
Well Done
عمل ممتاز
Good job.
Why U use position relative for each element ? Is it necessary ?
Did you know the reason?
If you know please explain it to me
On iOS devices when you scroll up negative dose this still work
can u help me ? my ul is to much right an i copied the code from you i got 6 times Home and i only see 5 because the 6th is behind the wall. Thank you !
thank you!
Ótimo vídeo parabéns 👌.
Um brasileiro :)
@@joaohoffman5613 oloooko 3 brs
@@el_vidal sheeeeeesh ai s
Brilliant
Thank you so so much 🫶🏻😭😭😭😭😭
Epic thank you
Ur so cool broo
lab u
Really cool