Responsive Navbar Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ก.ค. 2024
  • In this video I am going to walk-through the process of creating a quick and simple responsive navigation menu. Responsive navbars are increasingly important to have as mobile web browsing becomes more popular, and they are surprisingly easy to create. This means that we no longer need to turn to bootstrap just to get a fancy responsive navbar.
    Code For This Tutorial:
    github.com/WebDevSimplified/c...
    Code Pen For This Tutorial:
    codepen.io/WebDevSimplified/p...
    Twitter:
    / devsimplified
    GitHub:
    github.com/WebDevSimplified
    CodePen:
    codepen.io/WebDevSimplified
    #Responsive #WebDevelopment #Navbar

ความคิดเห็น • 665

  • @sainathk583
    @sainathk583 3 ปีที่แล้ว +98

    Wasted time watching other videos on responsive nav, this was super quick and super easy, thanks a lot helped me.

    • @lyricalmuse101
      @lyricalmuse101 3 ปีที่แล้ว +1

      You were exactly in my shoes. He teaches better unlike other youtubers

  • @neilhorne7000
    @neilhorne7000 2 ปีที่แล้ว +43

    I don't want to repeat everything that's been written here, but this is THE standard of concision and accuracy. No fluff. Great content.

  • @nadaah9
    @nadaah9 2 ปีที่แล้ว +8

    i was always afraid of css and now that I took it upon myself I just found that this channel simplifies the content which is concise and straight forward

  • @jefferymuter4659
    @jefferymuter4659 4 ปีที่แล้ว +5

    Maybe the best tutorial I've seen on anything Javascript. Explaining what you're doing, your thought process begin the simple stuff, showing the webpage as its being created, no impossible accent to interpret. Sub button so hard I need a new mouse.

  • @realjackofall
    @realjackofall 2 ปีที่แล้ว +3

    Thanks for making this Kyle! Your channel is one of my go to sources when I need to understand some of the concepts in a simple way.

  • @SecretHymns
    @SecretHymns 3 ปีที่แล้ว +6

    Love these tutorials. I've attended classes, signed up to tree house and plural sight, both are great! However these tutorials are to the point and are clear.

  • @jenglish1986
    @jenglish1986 2 ปีที่แล้ว

    The best part is the quick and simple. True to your word this was both and very clear. So many hours spent listening to half baked solutions that do not work nearly as well as this video. Bravo and thanks for posting!!

  • @andreranulfo-dev8607
    @andreranulfo-dev8607 ปีที่แล้ว +2

    I remember when this channel had just a few subscribers and I couldn't understand why. With years, I've seen the people all over the World watching these amazing videos. It helped (And still helping) me. I can even say that Kyle helped me put food on my table. Thanks so much!!!

  • @elrogelio
    @elrogelio 4 ปีที่แล้ว +4

    I found this video to be super helpful. I am making my first fully responsive site, so this simpler style is perfect for me. Once I get better at this I will mess around with animations more, for the time being, this is great!

  • @musicinsession
    @musicinsession 2 ปีที่แล้ว +1

    This is just amazing! Hands down, the best channel on the web! No non-sense, just straight to the point!! Bravo!

  • @ro3843
    @ro3843 4 ปีที่แล้ว +4

    what an awesome, straightforward tutorial. the best one for this that i've come across on youtube

  • @SteveT__001
    @SteveT__001 3 ปีที่แล้ว +3

    Finally I have found a responsive navbar tutorial that is simple, without all the bells and whistles that I don't need. Thanks

  • @gavinkalaher7314
    @gavinkalaher7314 ปีที่แล้ว +1

    Much better than the other video tutorial I watched yesterday that was over 40mins long! Excellent, thanks.

  • @zarghamaijaz5933
    @zarghamaijaz5933 4 ปีที่แล้ว +6

    Thank you so much for this amazing straight forward tutorial. You saved me from a lot of pain.

  • @connorkelly3014
    @connorkelly3014 2 ปีที่แล้ว

    Thank you! I'm currently a student working on a project, and could not for the life of me find a video I could follow along that worked. This worked for me like a charm!

  • @borntoplay92
    @borntoplay92 2 ปีที่แล้ว

    This video helped me so much!! I was getting so frustrated with making a responsive navbar. The final results was exactly how it looked in the video. I just tweaked a few things. Thank you so much!

  • @douglasfrb
    @douglasfrb 3 ปีที่แล้ว +52

    Thank you, dude! I've been practicing front end development and you're helping me a lot with CSS. Keep up the good word! :)

    • @lukas.webdev
      @lukas.webdev 3 ปีที่แล้ว

      Maybe my tutorial could also help you: th-cam.com/video/val62cQaZiY/w-d-xo.html

  • @AR0ES
    @AR0ES ปีที่แล้ว +1

    Very impressed how simple you taught this concept! I was a little afraid about this task. Thanks a lot!

  • @Muhammad_X
    @Muhammad_X ปีที่แล้ว +1

    Man... It's so amazing that everytime I encounter a problem during web dev, I see your videos for fixing those in a quick and efficient way.. Great work...🙌...Keep it coming... Admiring you brother..😍

  • @AAfzal5
    @AAfzal5 2 ปีที่แล้ว

    This is by far the best video I have ever seen on responsive navbar. Thank You so much for this!

  • @aquasaurus1504
    @aquasaurus1504 ปีที่แล้ว +1

    Thank you for your tutorials! They've been such a huge help whenever I've been stuck on doing something with js/css!

  • @ess2000
    @ess2000 2 ปีที่แล้ว +1

    Just WOW! Great explanation and love the beautiful simplicity. I've seen much more complicated examples that did not work have so nice.

  • @notc0mputing
    @notc0mputing ปีที่แล้ว +1

    I have been searching for weeks and this is finally the video that helped! you explain everything very well and you provide code sources so I don't have to spend half an hour typing the code in a way that work with the rest of my website, only for it to not work. good job, you get a like from me! :)

  • @omegamotivation144
    @omegamotivation144 3 ปีที่แล้ว

    Bro watching this again after 3 months by far the best tutorial. Simple and well explained code

  • @MrViciousway
    @MrViciousway 4 ปีที่แล้ว +7

    So sick, never though of using span like that, Best tutorial ever.

  • @nigelpallatt
    @nigelpallatt 3 ปีที่แล้ว +7

    Best ever tut, wish I had seen this 6 months ago.

  • @evolution6247
    @evolution6247 9 หลายเดือนก่อน

    by far the best tutorial of a responsive navbar on TH-cam!!! Thanks so much
    The explanatinos of what does what and what it is good for helped me so much. Also no links to existing code or icons. Perfect :)

  • @dmike4real496
    @dmike4real496 3 ปีที่แล้ว

    Best responsive nav bar tutorial on youtube hands down! Thanks man

  • @djukic921
    @djukic921 3 ปีที่แล้ว +2

    So little views on such a great content... I was searching for this channel for so long man.
    Thank you so much and keep up the good work!

    • @hammavaqttv2273
      @hammavaqttv2273 3 ปีที่แล้ว

      th-cam.com/video/vh7obWOC3jY/w-d-xo.html please can you watch this video

  • @lo7430
    @lo7430 5 ปีที่แล้ว +5

    Great tutorial! Thank you so much. So easy to follow and i think it's great that you are explaining every step so we can understand what is going on :)

    • @WebDevSimplified
      @WebDevSimplified  5 ปีที่แล้ว +3

      You are welcome! I am really glad it was easy to follow.

    • @lorenzo99945
      @lorenzo99945 2 ปีที่แล้ว

      @@WebDevSimplified i need some help

  • @willneve7306
    @willneve7306 3 ปีที่แล้ว +7

    Short, to the point yet well explained steps. Thank you for this !

  • @antonyrichard369
    @antonyrichard369 3 ปีที่แล้ว +1

    Great video. Very much required video. Gave me a full clean picture of how we create menus in a categorized and organized way.

    • @hammavaqttv2273
      @hammavaqttv2273 3 ปีที่แล้ว

      th-cam.com/video/vh7obWOC3jY/w-d-xo.html please can you watch this video

  • @kingsleyabang3403
    @kingsleyabang3403 ปีที่แล้ว

    This is the best I've come across. It's so straight and on point. Thanks so much

  • @renrandom217
    @renrandom217 5 ปีที่แล้ว +56

    Dude you're awesome! This is best video of responsive nav I've ever seen

    • @WebDevSimplified
      @WebDevSimplified  5 ปีที่แล้ว +6

      Thank you!

    • @lukas.webdev
      @lukas.webdev 3 ปีที่แล้ว +2

      I completely agree with you! And if you mastered this tutorial, you should also try my advanced version of a Responsive Navigation Bar. || th-cam.com/video/val62cQaZiY/w-d-xo.html

    • @kidbrave_7673
      @kidbrave_7673 3 ปีที่แล้ว

      I second that!! I search and saw at least 5-6 navbar videos and they all have animation using jquery or a more complex way of using there css to build the hamburger and the navbar, but your approach was very clean and straight to the point of what I wanted which was literally what the title of the video says. Lmao "responsive navbar" that's it lol so thank you web dev your tremendously helping me out with my journey and a javascript developer. 😁🙌🏽

  • @markharrington5826
    @markharrington5826 3 ปีที่แล้ว

    Brilliant delivery , brilliant lecture Thoroughly enjoyed watching and learning from you
    Thank you

  • @hellodolly7989
    @hellodolly7989 3 ปีที่แล้ว +2

    Awesome, thank you so much! I was struggling getting elements to not look terrible when shrinking the window

  • @eggz1012
    @eggz1012 2 ปีที่แล้ว +1

    thank yooooouuuuuuuuuuuu I like your quick and straight to the point expressions

  • @paulofernando78
    @paulofernando78 ปีที่แล้ว

    I've watched lots of video here. This one was the simplest and easiest to understand. Thank you.

  • @JohnDoe-fv5cu
    @JohnDoe-fv5cu 5 ปีที่แล้ว +2

    Perfect! Very simple and clear, just what tutorials must be. Thumbs up!

  • @777tellthetruth
    @777tellthetruth 3 ปีที่แล้ว +1

    Thank you for making this video simple, concise, and impactful. Will be watching all your videos.

    • @hammavaqttv2273
      @hammavaqttv2273 3 ปีที่แล้ว

      th-cam.com/video/vh7obWOC3jY/w-d-xo.html please can you watch this video

  • @bardus_hobus
    @bardus_hobus 3 ปีที่แล้ว +1

    Great vid, thanks! I particularly love tutorials that don't waste time with stupid intros and logos, they just get right into the teaching. Again, thanks!

  • @producermind9030
    @producermind9030 3 ปีที่แล้ว +1

    That was fantastic... haven't done CSS in a hot minute but you explained stuff perfectly! ...

    • @hammavaqttv2273
      @hammavaqttv2273 3 ปีที่แล้ว

      th-cam.com/video/vh7obWOC3jY/w-d-xo.html please can you watch this video

  • @puppetmarion
    @puppetmarion 3 ปีที่แล้ว +1

    This video is way too underrated. This needs MORE views seriously.

  • @doronmarom7193
    @doronmarom7193 3 ปีที่แล้ว

    Thank you very much! you made it so much easier than a lot of tutorials

  • @longevityfitgroup5472
    @longevityfitgroup5472 2 ปีที่แล้ว

    I love your video very transparent and simple to innerstand definitely buying your css course

  • @semnijipa2649
    @semnijipa2649 ปีที่แล้ว

    Thank you very much for these essential pieces.

  • @Deanthemachine1983
    @Deanthemachine1983 2 ปีที่แล้ว

    Great tutorial! Very straightforward and insightful. Thanks for sharing!

  • @smithnicholas7
    @smithnicholas7 8 หลายเดือนก่อน

    This guy is my complete source of web development. Big Thanks Man!

  • @TheRajmoney
    @TheRajmoney 3 ปีที่แล้ว +3

    i like how this man explains the css.

  • @vandv8783
    @vandv8783 ปีที่แล้ว

    This is so helpful for a beginner, thank you! I enjoyed learning by watching this.

  • @tibabdel6148
    @tibabdel6148 2 ปีที่แล้ว

    Thanks mate, I really enjoy your videos and the way you explain things!

  • @Lazy_Laplante
    @Lazy_Laplante 3 ปีที่แล้ว +1

    THANK YOU !!!!! i have been looking for a decent hamburger-nav video for ages. this saved me in my web class!!!!!

  • @ssk7690
    @ssk7690 ปีที่แล้ว

    The world is a better place cause of people like you. Thank you!

  • @Godisbetter909
    @Godisbetter909 4 ปีที่แล้ว +3

    You made my day, thank you so much! Keep it up!

  • @astroflexx82
    @astroflexx82 10 หลายเดือนก่อน

    Thanks a lot for this tutorial dudeeee! I was so confused as to how this works but you explained it so easily Thankssss

  • @thenatricvibe3661
    @thenatricvibe3661 2 ปีที่แล้ว

    This is the most easiest tutorial that I found to follow, Thank you!

  • @nigelpallatt
    @nigelpallatt 3 ปีที่แล้ว +1

    One of the very best tuts I have seen. Well done and thank you. (ps: there are errors but you should have no problem fixing them).

  • @shannonstumpf1861
    @shannonstumpf1861 ปีที่แล้ว

    this is by far the best tutorial i found on this.

  • @silviaaa
    @silviaaa ปีที่แล้ว

    What an excellent, clear tutorial! Thank you!

  • @thanksyou9658
    @thanksyou9658 ปีที่แล้ว

    Thanks! Very useful for my final year project!

  • @fromthestring5704
    @fromthestring5704 3 ปีที่แล้ว

    Excellent video. The narration is spot on.

  • @rodrigocornidez1917
    @rodrigocornidez1917 2 ปีที่แล้ว +1

    This was perfect, thank you for the tutorial!

  • @solcolombo6831
    @solcolombo6831 3 ปีที่แล้ว +1

    Best explanation ever !!you make the best videos of web dev.

  • @rooveloft5273
    @rooveloft5273 ปีที่แล้ว

    Thank you so much i was struggling with this for 3 days straight until watched your video 💙

  • @kularanjankindo1009
    @kularanjankindo1009 2 ปีที่แล้ว

    Best and easy tutorial in less time... Thank you 💖

  • @AGriffith
    @AGriffith 2 ปีที่แล้ว

    Thanks man this video helped me a lot to understand responsive navbars!

  • @johnnychin9598
    @johnnychin9598 2 ปีที่แล้ว

    wow omg very imformative, i've been looking for this turorial. luckily i have found your tutorial. thank you so much.

  • @capyprograma
    @capyprograma ปีที่แล้ว

    Thank you, your video helped a lot. Great work!

  • @carlonnrivers
    @carlonnrivers 4 ปีที่แล้ว +3

    That is soo simple! I had thought I'd need to create new buttons in another list and hide those and do some 20 lines of js code to check if one is displayed else set the other! Definitely gonna use this anytime the need arises. :D

    • @WebDevSimplified
      @WebDevSimplified  4 ปีที่แล้ว +2

      I'm glad you found my video useful. Back in the day your idea would have probably been the most popular, but with the power of modern CSS we can do a lot without the need for extra JS.

  • @its_shah_020
    @its_shah_020 2 ปีที่แล้ว

    It's just amazing brother, Thank you so much for this beautifully explained video.
    Love you 3000 times ❤❤❤

  • @AyushKumar-yk9fw
    @AyushKumar-yk9fw 4 ปีที่แล้ว +1

    THANKS A LOT, Kyle! You saved my day.

  • @jossiefxd
    @jossiefxd 3 ปีที่แล้ว

    this is my favorite youtube channel for learning

  • @Photo17451
    @Photo17451 4 ปีที่แล้ว

    Excellent tutorial! Well explained. Thanks.

  • @queenofcoldness7683
    @queenofcoldness7683 2 ปีที่แล้ว

    Thank you! I learned a lot from this short course. :)

  • @philliphess6407
    @philliphess6407 ปีที่แล้ว

    Excellent Video Kyle, also - Excellent shirt choice

  • @dpapa2175
    @dpapa2175 4 ปีที่แล้ว +3

    very cool tutorial. Thanks. I like the way you've structured this. I downloaded some examples and got totally baffled. But broken into simpler steps it all makes sense. (newcomer to css,html, and js btw)

  • @Elena-fc3hp
    @Elena-fc3hp 4 ปีที่แล้ว

    Thank you! You really helped me! I love your channel.

  • @pini5076
    @pini5076 5 หลายเดือนก่อน

    Clear explanation!Thank you!

  • @mspanhaak
    @mspanhaak 5 ปีที่แล้ว +5

    I struggled with my own nav bar to do exactly this...... thanks a bunch, i've immediately built it in into my site. Thanks!

  • @audraogilvy2605
    @audraogilvy2605 ปีที่แล้ว

    Thank you - just what I was looking for!!

  • @kevinkisibo4878
    @kevinkisibo4878 6 หลายเดือนก่อน

    Thank you for the explanation. You the best unlike others who want us to learn from background music playing in their tutorial 😂

  • @ericdimarzio5756
    @ericdimarzio5756 ปีที่แล้ว

    What a great video. Thank you so much.

  • @akshayshinde2403
    @akshayshinde2403 2 ปีที่แล้ว

    Why it didn't show up in my feed till? The best and easiest video ever. No need of spending 30/40 mins. All my next sites will have some mobile navbar.

  • @o1techacademy
    @o1techacademy ปีที่แล้ว

    Thank you kyle. Your tutorial is quite useful to me.

  • @abzz1290
    @abzz1290 ปีที่แล้ว

    Thank you so much real simplified :)

  • @ananditaxia521
    @ananditaxia521 2 ปีที่แล้ว +1

    U Saved my another day. You left me speechless. Thank you very much 🙃

  • @saadmalaeb8372
    @saadmalaeb8372 3 ปีที่แล้ว

    This tutorial is a hidden Gem 💎

  • @darkmatter85
    @darkmatter85 ปีที่แล้ว +1

    Thanks, you just earned another subscriber

  • @lookatmafit17
    @lookatmafit17 2 ปีที่แล้ว

    very helpful for my first project, tysm!

  • @paulpancake
    @paulpancake ปีที่แล้ว

    Amazing tutorial, super easy to follow for beginners. thank you!

  • @teakodo
    @teakodo 6 หลายเดือนก่อน

    thank you for the explanation ! Amazing

  • @techniumtech4887
    @techniumtech4887 2 ปีที่แล้ว

    Wow. I agree with many of the comments here. Quick and easy, no fluff or jokes. new sub!!

  • @Jessijokes
    @Jessijokes 4 ปีที่แล้ว +8

    Definitely the best Navbar tutorial I've ever seen but holy crap do you ever go fast. I kept having to pause and rewind!

  • @chmpichrizz45
    @chmpichrizz45 2 ปีที่แล้ว

    I love your Videos soo much thanks for everything!!!

  • @nordic-walking-adventures
    @nordic-walking-adventures ปีที่แล้ว

    Great content. Really useful video, I learned a lot actually!

  • @mushfiqulislam21
    @mushfiqulislam21 ปีที่แล้ว

    Most easiest way. And most helpful

  • @cadetsherly2322
    @cadetsherly2322 9 หลายเดือนก่อน

    Simple for you but na me. Great video you, Kevin powel and Dave gray are the foundation of front end DEV learning journey

  • @Jollyjoky
    @Jollyjoky 3 ปีที่แล้ว +1

    This tutorial is amazing! It delivers a lot of value in little time!

  • @gloriabukachi1
    @gloriabukachi1 5 ปีที่แล้ว +2

    Thank you for making it very simple.

  • @gabyg9905
    @gabyg9905 2 ปีที่แล้ว

    Thanks! just what she needed.