Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT
ฝัง
- เผยแพร่เมื่อ 28 ส.ค. 2018
- Check out my courses and become more creative!
developedbyed.com
My take on making a responsive navigation bar in 2018 with media queries and a sprinkle of animations and javascript. In this tutorial we are going to learn media queries, keyframe animations, basic javascript toggling, building a burger menu and more!
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
~-~~-~~~-~~-~
Follow my Twitter:
/ deved94
Please watch: "Should You Become A Software Engineer?"
• Video
~-~~-~~~-~~-~ - แนวปฏิบัติและการใช้ชีวิต
The fact that he codes with one leg up in the chair is amazing
I do that as well
I do that as well
I do that as well
❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.
Thats what i was thinking 💀😂😂😂
1. "Great personality
2. You're a great teacher
3. You got a new sub!"
4. best dynamic!
same here... since a week or so 😃 very cool dude with a massive ... ehm, coding speed, she said!! 🤓
@@henningsieh that's what she said ;)
copied
@@user-fq9ct5iu3c ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻
Same
I love the way you just winged this and fixed stuff on the fly. That teaches a lot. I followed along and broke so much cos I wasn't paying attention then had to fix that myself. Ultimately I was laughing so loud trying to do something so simple ... learnt a lot. And I think that is when stuff sticks. Brilliant.
One of my favorite things about Ed is his relevance ...such as "what did I miss". I can not tell you how many times I have said this to myself as I was programming lol
I love the fact you take us through your design thought process. debugging and all. interesting stuff
th-cam.com/video/Iau47_Uefho/w-d-xo.html -- image sliding animation using html & css
❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.
1. Love your personality
2. You're a great teacher
3. You got a new sub!
Don't apologise for your videos being long. You are amazing! 🙏🏻
I don't know how one hour passed so easily. You are fun to watch and great to learn. Thanks. After watching this video now I am feeling confident to create a navbar on my own.
I'm glad to know that I'm not the only one that keeps forgetting how to remove those odious bullet points
❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.
Dude, this is excellent! Especially since I'm just getting started in the world of the Front End. You have an extraordinary way of teaching, with a very clear didactics. Thank you!
Love listening to you talk out loud so we can hear your thought process! Turned out really nice! Thank you
You know why i am Watching you,
what makes you stand out of all is:
After Watching your videos I learn something, and be actually able to do it on my own.
Thx for this tutorial, had forgotten all about CSS animations, thx you for restarting my interest for CSS :)
th-cam.com/video/Iau47_Uefho/w-d-xo.html -- image sliding animation using html & css
This is the best responsive navbar from scratch tutorial so far! I've always been only knowing the bootstrap style for responsive navbar. However, I fell in love with this one. Thank you very much .
❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.
Yet another AMAZING video!. Thank you brotha for putting out awesome content that's relevant to current websites with nowadays features your one of the only TH-camr devs out here creating content that's a much need skill to know on the job and in general for software engineers!.
Man have you try laughing and typing at the same time, man I'm having so much fun coding. Thank you!!
That was dope it was pretty good because you explained your thinking behind a lot of what you were coding thank you!
th-cam.com/video/Iau47_Uefho/w-d-xo.html -- image sliding animation using html & css
I think I learned more in this 35-minute video than I did from hours and hours of tutorials online.
I struggle with navigation bars a lot Ed. Thank you for posting this (even though it was awhile back) Just found your channel today and I am looking foward to watching all of it!
❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.
Thanks sooo much Dev Ed, a brilliant tutorial, you show the way you work out these problems which is so useful and makes it soo much more fun. :) lovely person on the internet!
When you made this type of projects then please save them in one playlist. You are great bro
th-cam.com/video/Iau47_Uefho/w-d-xo.html -- image sliding animation using html & css
th-cam.com/video/Iau47_Uefho/w-d-xo.html -- image sliding animation using html & css
"I actually thought that was too big, that's what she says". You're ridiculously funny😄, I love your content!
Thanks a lot for this video man! Those are the videos that truly teach you HTML-CSS-JS in action!
This helped me Alot. I was stressing out on an error. just a line of code from this video fixed that error. Im so thankful to you
Its really fun to learn with you , (your reactions)its how I also used to do while coding !!! Keep it up, we need the teachers like you. Thankyou so much: and ya! I am your new SUBSCRIBER.
Amazing video! thank you for the help, keep up the good work :)
dude you've got such a vibe, which i loved it, thank you so much!!
Amazing!! That tip you shared about how to set up the divs in the nav is PRICELESS!!!
the fact that he always have a "that's what she said" line, makes it a hundred times better
th-cam.com/video/Iau47_Uefho/w-d-xo.html -- image sliding animation using html & css
@@ayanarko8890 wtf random video
THANK YOU for making a comprehensive, free tutorial for this :) This was actually better explanation than some of the udemy tutorials I've seen
th-cam.com/video/Iau47_Uefho/w-d-xo.html -- image sliding animation using html & css
❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.
This man is so charismatic! You earned a sub on my first view!
Thanks for the tutorial. I actually really appreciated seeing how you troubleshoot when things don't work as expected. I learned a lot about how I can do that for my own projects through this! :) Great teacher, please keep making videos like these!!!!
Thank you so much!
Hi Dev Ed. Great tutorial! As a little tip. If you set {min-width: 30%}; and add a margin to each list item of 10px, that sorts out the issue with the spacing of nav links from laptop to tablet viewport width which you experienced at minute 14:00.
Thanks again!
my js is the same as yours.. but it wont slide out..
Loving this tutorial ❤️ awesome explanation and debugging
I love the excitement and confidence in your face! Thank you for this :D
❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.
HHHHHHHHHHHH im actually learning and laughing in the same time , thank UUUU dude
@Ashfaq Ashraf you dont have any videos
IF ANYONE HAS THE PROBLEM THAT LINKS DON'T APPEAR WHEN THE RESPONSIVE NAVIGATION IS EXPANDED!
instead of => '
Use this sign => `
in the command link.style.animation = `navLinkFade 0.5s ease forwards ${index/5+0.5}s`;
This sign is present below the escape button on your keyboard.
OMG thax
I don't normally reply here on TH-cam, but I watched this tutorial in its entirety and had this issue, I was not able to fix it until I changed my single quotes to the grave marks. Thank you so much for the hotfix! I appreciate it greatly.
You just saved me! Thanks
Dude you are the man :D but as im new on the javascript and just begining to learn it, can you tell me whtas the differents => " => ' => ` . why it didn't work with " and ' ?
@@martinperens I think it takes ' ' as a string and ` ` as a script
Awesome job, thanks so much. Watching you do this and doing it with you really helps me understand. Keep it up bro!
I love your teaching coding and debugging style.
You are one of the good teachers I have ever seen as a youtuber
Thanks for your kind and helpful video.
I'll keep watching your every videos.
this guy has a great vibe (lowkey crushing on him ;p) btw thnks for such a great video its just what i needed
Thank you so much for this tutorial!
I like the fact that it looks so clean and is scalable with the number of links. So easy to integrate in a website!
I even included dropdown submenus with ease.
Also don't worry about the video length, we can watch it in x1.5 speed ;)
❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.
Thank you so much!! This tutorial helped me a lot. Had to make a few changes cause I'm using React I guess some things didn't work cause of that, but I was able to work on a great Nav component thanks to you! :D
I learned A LOT! Wow what a great tutorial. I subscribed. Thank you. Looking forward to watching more from you!
please make big tutorial like creating form login, register, and email activating membership. big thank sir.
I Loved this stuff, Please keep on giving more stuff like this.
Finally someone with the same thinking process I have. Thanks ED! You awesome bro!
for anyone stuck at 27:10
link.style.animation = `navLinkFade 0.5s ease forwards ${index /7}s`;
console.log(index / 5 + 0.2);
don't use a comma use the sign close to the "1" on your keyboard
thanks.....stucked at it for too long..xd
its called the legendary `BACKTICKS`.
we usually call that ' tilde ' key
dude, thank you so much!!
thanks! I didn't notice at all !!
Great Work as always Edd, I am backend developer currently tutorial my way to front-end dev. for those who are actually trying in on their mobile phone and have extra space on the right side just add minimum-scale=1 on your meta after initial-scale=1, it will remove the visible hidden nav links on the right. cheers
You sir are a legend!
Thanks :)
Man, thanks.
Achmad, thanks a lot! I knew I would find the answer here. You are the best!
I LOVE YOU!
Really helped me with my school project! I have to make my own full website in about 2 weeks. So glad this tutorial is so good!
th-cam.com/video/Iau47_Uefho/w-d-xo.html -- image sliding animation using html & css
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
th-cam.com/video/CFAmhyEB1Jw/w-d-xo.html -- image animation
enjoyed this tutorial so much! great work!
This will serve me so good. Thank you.
- I noticed a typo in paddding, but still everything worked fine haha
- Also, when you shrink the window to make it responsive, I can see the bar closing in automatically the first time I do this. I haven't been able to figure out how to fix it yet
me too i have the 2nd problem you said
I have the same problem, I can see the menu closing.
@@theXtroyer1221 I've got the fix for it: under the media queries add display: none; to .nav-links and then add display: flex; to .nav-active;
@@var1541 oh ok gonna try it
@@theXtroyer1221 nvm it removes the slide transition completely, a temporary fix is to ignore above things and just remove the transition property of nav-links, this keeps the opening transition but it closes abruptly.
Hey Dev Ed, thanks for dropping this video, it's always inspiring to watch these video's and your enthusiasm is contagious. When implementing the code you wrote for adding a togglemenu, there's a ghost menu when I reduce the size of my window to where the burger pops up. It show's the nav-links for a split second and then slides away again. How do you prevent this from occurring?
I just LOVE YOUR VIDEOS MAN!
Thank you! Exactly what I was looking for, and then some!
Thanks for this! Helped me a lot. Now I just have to make it work in React. XD
Feel free to leave any questions and suggestions :)
can u maybe zoom in on the code next time?
for sure!
Dev Ed Can you please share your code to play with? Big thanks. :)
can you show me how to create dinamic page website thanks dev. :D
Hi, the (transition: transform 0.5s ease-in;) will cause the nav-links to ease-out if you play with the width of the browser (media)
My dear. I'm very glad you're accurately explaining it. I do not hear and yet I understand all of you. Thank you very much. Hope you can continue learning.
Hey Ed, thank you so much for this tutorial. It was very helpful. Keep the good working.
Thanks a lot! *How to make the menu closing when i click or tap the outside of menu?*
You just need to add a new listener to *body* and do repeat the code. See the big line?
Small tips:
You can also make it close every time you press the 'Esc' on your keyboard! (cool isn't it?) Search for keyup and also add the listener.
I hope this help you a bit and good luck for the challenge!!
I can't do de delay at the end it just doesn't work for me?
Grandeeeeee el mejor,
i really enjoy your tutorials, greetings from Colombia
This an amazing tutorial, super helpful! Thank you, you saved me!
Apparently everything else works but my @keyframes. It seems the for and to commands are not recognized :(
same problem here. So annoying to NOT see the links fading in :((
"its too big, thats what she said" - that made me laugh XD
I reversed the video to double check I wasnt tripping... that made my day! Lmao💜
great jokes for 10 year olds
@@ahmedrobi6507 hahahaha eDgY
@@ahmedrobi6507 you doggggggggggggg shit
Sir please find me the nav-link class he declared
look at him man, he is loving what he is doing
It was a long video but it was worth watching and too informative. Thank you for helping out to make a responsive navbar!!
I follow every steps you done but it seems I got some problems. sliding bar is working but the nav-links isn't showing up but If I remove the opacity in nav-links li it show up but no animation
same thing happens with mine
Time stamps:
1:24 - HTML
2:57 - CSS
19:55 - JavaScript
Solid start to a great page! Thanks for posting this Ed. Probably going to use this Navigation bar for some small businesses in my area.
dude you're my hero. thank you so much for what you do
I click LIKE whenever I hear him make an inside joke in the video.😂
Can you explain me, Why I do inspect on web browser, and go to device tool bars and the body overflow-x: hidden; doesn't work :(
me too
great video. I'm new to programming but your video is one of the best so far. in simplicity really helps.
3 years later, your video helped me a loooooot. thank you so much!!!
Hello! I followed your method and was able to create a good looking navigation bar but what i noticed is that the burger function would not work on my other pages. but the normal navigation bar works.
Please help!!!!!!
I tried to remove the toggle menu when clicking on a link, but when i try to re-open the menu, the links doesn’t appear. (i tried to re-add the class nav-active but still doesn’t work)
same
this guy is just chilling and making the vid, but he is really good. Loved your teaching
Note - You earned a subscriber
Incredible, very fasted. Good Job man !!!
If you copied the code exactly and are wondering why when you click the burger nothing happens, make sure you linked the javascript in the body of the html and not the head.
Where can i get the codes because i followed the video but am not getting the view and output he gets.
tnx brooo
Many thanks for this tut. Really helpful for beginner as I am !
Just a question (as we don't have content in your example, this doesn't occur): if you're in the width mobile view case actually you make the scroll disable in order to keep nav burger menu onscreen and not going away (overflow:hidden). This makes the content unable to be scrolled as well. Do you have a solution to disable scroll ony when menu appears ? Anyway, thanks for those cool tips :) Cheers!
Did you ever find a soulution for this? I'm having this exact issue right now!
i found the solution changing the meta data in the html file
using this code
@@Davidebrocc98 gonna try that, thanks !
Thank you so much! It is nice that we get to see what possible errors we might make so that we can keep an eye in the future
th-cam.com/video/Iau47_Uefho/w-d-xo.html -- image sliding animation using html & css
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
th-cam.com/video/CFAmhyEB1Jw/w-d-xo.html -- image animation
this video was great - really helped me a great deal :) thank you sir, you've got my sub
th-cam.com/video/Iau47_Uefho/w-d-xo.html -- image sliding animation using html & css
Dev Ed thanks bro, the best turtorial ever👌👌!!!!
but it would be far better if you share the code files with us please .
it doesnt work, when we open it in mobile view, through inspect in chrome it show the web view only.....then i changed the media screen size to 1080px then also it wasn't displayed properly....please help
copy this into the section of your html doc.
Excellent tutorial, can finally build a fully responsive navbar :D
This helped so much for me as I am only a beginner. I tried so many other videos and they all didn't work. Great tutorial, keep up the good work.
no sadly not "const navLinks = document.querySelectorAll('.nav-links li');" give me no links in the sidebar - the function is working fine - all is good except no visible links in the sidebar
i think im having the same issue i cannot see my 'a' links after finishing the JS portion in the video
Me too!!
Saw one comment who solved the issue for me. In JS go to the following line:
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`;
Put a ` at the end instead of a '
Pls why I'm i having trouble getting the burger transition the list item
Whenever I click nothing happens
Put .nav-active inside your @media query
Christian Larsen thanks mate... I did fix it already, kind of tricky when I did.... My browser wasn't recognizing 0 as opacity value so I appended "px" at the end and made some corrections to my js file
@@absolution8637 btw, opacity does not use length unit. So the value is between 0-1.
please can you tell me how did you fix your js file cause I have the same problem!
Really loved the tutorial. I used it to create a navbar on my personal website. Everyone thinks the mobile navigation is amazing.
ty for this awesome TUOTORIAL Hope you many of this all time
It just doesnt work for me and im sure i got the same excact thing can some one please help
don't know if you still wan to know but for me the problem was that I linked the javascript in the head part of the html instead of the body.
@@krust_ i had the same problem buts i already fixed it a year ago 🤣❤🙌🙌🙌🤦♀️️🤦♀️🤦♀️🐱🏍🐱🏍🐱🏍🏍🏍🏍♀️
overflow-x: hidden not working on Chrome, do you have any idea how to fix this?
html, body {
overflow-x: hidden;
}
same.
it tried html,body and that hasn't worked either
Same problem, does anyone have a solution to fix this?
When I added
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
then it worked in chrome
It works on the desktop browse but not the mobile browser. On the mobile I can scroll over to the right and see a blank box with the background color. Still looking for a solution.
Hands down the most comprehensive tutorial for a responsive nav bar. 5 stars
You are the best Ted. Thanks a lot for this tutorial
Well if anyone else had the problem that when you switch from desktop size to screen size the menu would fade out like you closed it (seen: @34:40), move "transition: transform 0.5s ease-in-out;" to .navlinks-active.
Great video thank you
This kind of works but then the transition is taken away when you close it. Anyone have a fix for this?
css-tricks.com/stop-animations-during-window-resizing/
Hey Ed! I love your tutorials! I have a problem though, at the start of the JS the nav doesn't slide out. Does anyone else have the same problem? How did you fix it?
Pierce Russon have it too...
@@mary0180 i had the same problem but i just removed the dot before the nav-active class - nav.classList.toggle('nav-active');
Eugene Paul Cabauatan thanks, i‘ve added .nav-links.nav-active { transform: translateX(0%);} at the end and now it shows
@@mary0180 where you add?
Luis Rocha before .nav-active
This is the most useful video on how to create a nav bar i have come across! Thank you so much for sharing :-) it's really helping me to understand how to make a responsive webpage step by step :-)
Great video Ed!
For anyone who's having problem with "overflow-x: hidden" not working properly on Safari try this:
html, body {
overflow-x: hidden;
position: relative;
}
thank you so much it worked for me
About 30 minutes wasted before i thought to search 'overflow-x' in the comments! 🤣
The code looks so neat! I love it ; )