• Sunday , 29 March 2020

Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT

Code Canyon



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?”

-~-~~-~~~-~~-~-

Original source

3d Ocean

Related Posts

38 Comments

  1. Foto Somai
    January 27, 2020 at 17:07

    That's super but too difficulty for me. Does somebody knows the link in github, how do I get it?

  2. Vicente Manriquez
    January 27, 2020 at 17:07

    On cellphone dosnt work :C

  3. Amir Khazaee
    January 27, 2020 at 17:07

    where is the source code !

  4. Pierce Russon
    January 27, 2020 at 17:07

    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?

  5. dngt90X
    January 27, 2020 at 17:07

    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.

  6. dngt90X
    January 27, 2020 at 17:07

    Best and most simple video on this topic I could find. Thanks, bud! Felt like I wad in a classroom.

  7. The Salty Frog
    January 27, 2020 at 17:07

    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

  8. Kyle
    January 27, 2020 at 17:07

    anyone know a solution to when the page is going from desktop to mobile the nav animation plays once

  9. Timon Lööck
    January 27, 2020 at 17:07

    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?

  10. saltando clases
    January 27, 2020 at 17:07

    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???

  11. Francisco C.
    January 27, 2020 at 17:07

    link.style.animation doesn't seem to work, any advice?

  12. Anthony mann
    January 27, 2020 at 17:07

    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

  13. mastrcodr
    January 27, 2020 at 17:07

    What are you using to auto-format your code like that?

  14. Teboho Ntene
    January 27, 2020 at 17:07

    Love the fact that you get stuck and you make mistakes. And you don't edit them out like other youtubers

  15. Sandi Hadyono
    January 27, 2020 at 17:07

    Why u dont use <span>? To replace <div class="line">

  16. Ali Dahud
    January 27, 2020 at 17:07

    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.

  17. Cami Walker
    January 27, 2020 at 17:07

    This is great! What if I wanted to add a dropdown to one of the links? #noob

  18. Maximilian Lahr
    January 27, 2020 at 17:07

    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.

  19. Mohammad Anarul
    January 27, 2020 at 17:07

    thank you so much..

  20. Burak Şahin
    January 27, 2020 at 17:07

    successful

  21. patrik
    January 27, 2020 at 17:07

    That text delay using Javascript seems not working in Brackets Live Preview or is it just me?

  22. Joaquim Saraiva
    January 27, 2020 at 17:07

    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.

  23. Glow0110
    January 27, 2020 at 17:07

    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?

  24. Baturq
    January 27, 2020 at 17:07

    code ?

  25. Linnéa Hådén
    January 27, 2020 at 17:07

    Thanks for this! Helped me a lot. Now I just have to make it work in React. XD

  26. Prashant Dahal
    January 27, 2020 at 17:07

    code for this nav bar??? plz

  27. Christian Esdaille
    January 27, 2020 at 17:07

    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.

  28. zyer
    January 27, 2020 at 17:07

    "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

  29. shadrack kiprotich
    January 27, 2020 at 17:07

    this is the sweetest tutorial

  30. Chris
    January 27, 2020 at 17:07

    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

  31. Quiet Lab.
    January 27, 2020 at 17:07

    Thanks a lot! How to make the menu closing when i click or tap the outside of menu?

  32. toni toni
    January 27, 2020 at 17:07

    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 ??

  33. ahmat randy
    January 27, 2020 at 17:07

    Mannn !!!!!! Nice to meet ur chanel 👌👌👌👌

  34. sojino hong
    January 27, 2020 at 17:07

    Hey man! you are the true best instructor. people can learn fast with you.

  35. satya VALLURI
    January 27, 2020 at 17:07

    What if you want to slide/move the links when you click the cross mark div that makes the menu disappear.

  36. Gabriel M
    January 27, 2020 at 17:07

    Hiii
    Which theme are u using on vscode?

  37. Frank Martin
    January 27, 2020 at 17:07

    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

  38. Frank Martin
    January 27, 2020 at 17:07

    Your coding is fast dude!

Leave A Comment

You must be logged in to post a comment.