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!
-~-~~-~~~-~~-~-
Follow my Twitter:
https://twitter.com/DevEd94
Please watch: “Should You Become A Software Engineer?”
https://www.youtube.com/watch?v=V_kTl0eIJ4A
-~-~~-~~~-~~-~-
Original source
38 responses to “Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT”
That's super but too difficulty for me. Does somebody knows the link in github, how do I get it?
On cellphone dosnt work :C
where is the source code !
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?
The three lines for the burger menu is sitting right below the top of the screen. How do I center it? Looks like my code is matching with urs.
Best and most simple video on this topic I could find. Thanks, bud! Felt like I wad in a classroom.
i got lost after minute 28:44 i notices a " ; " change after the if statement but mi model just wont work idk what am i doing wrong, it use to work before we wanted a loop :c
anyone know a solution to when the page is going from desktop to mobile the nav animation plays once
Everything works until the JS part. I've double checked the code twice and everything seems to be in position, but the burger just won't open when I click it. Why could that be?
hello, can someone help me, the overflow-x:hidden; in my pc seems good, but in mobile devices is not working, i had read that mobile browsers don't recognize that property when is in the body tag, so I create a div container and write the same property, but dosent work, I try to write that on the * selector, but I got the same result, I even try to use just overflow:hidden!important; and overflow-x:hidden!important; but anything seems to work, any ideas???
link.style.animation doesn't seem to work, any advice?
So i'm not sure how but i have managed to have the X display when the menu is closed and the 3 bars when the menu is opened any ideas on how to fix? I've messed up something but i can't figure out what
What are you using to auto-format your code like that?
Love the fact that you get stuck and you make mistakes. And you don't edit them out like other youtubers
Why u dont use <span>? To replace <div class="line">
Hi, I'm facing a slight problem here 🙁
That whenever I press tab through the site in responsive mode, it shows the hidden overlay. Oh, also how can I knock out the on every refresh it slides in the navigation bar? It has driven me mad.
This is great! What if I wanted to add a dropdown to one of the links? #noob
Thanks for your awesome tutorial. I have a question.
Is there a way to also let the links fade out?
Right now when you close the burger menu the background fades out but the links just disappear.
thank you so much..
successful
That text delay using Javascript seems not working in Brackets Live Preview or is it just me?
Thanks for your video, however i think this is a not a good solution. Exploring this on the mobile view you can still scroll on X and see the menu. When you apply the solution most recommend on stack overflow all this becomes useless.
Awesome video as usual smiley faces 😊can you make a video explaining the section/article/div/header/aside/main elements and the best practices for using these?
code ?
Thanks for this! Helped me a lot. Now I just have to make it work in React. XD
code for this nav bar??? plz
Does anyone know what color theme or extension he's using? I used a similar default theme on atom but after switching to vs code I cant find anything similar.
"line1
line2
line3"
doesnt show up at all for me any fix?
Edit: what i mean is that there are no lines when i go in inspect elements they dont get highligthed
this is the sweetest tutorial
I tried to fix the .nav active transition 0.5 ease in issue index list problem on chrome but i still cant get it to work. must be another issue is missed
Thanks a lot! How to make the menu closing when i click or tap the outside of menu?
one thing I noticed when I was finished with the tutorial the nav bar in mobile mode always appears when resizing the window automatically and then goes to the side. How do you fix that ??
Mannn !!!!!! Nice to meet ur chanel 👌👌👌👌
Hey man! you are the true best instructor. people can learn fast with you.
What if you want to slide/move the links when you click the cross mark div that makes the menu disappear.
Hiii
Which theme are u using on vscode?
Thanks Dev Ed I've learned so much now I can fix my WordPress site and know where to look for my CSS and JavaScript
Your coding is fast dude!