Responsive Navbar Tutorial

Поділитися
Вставка
  • Опубліковано 11 лис 2024

КОМЕНТАРІ • 661

  • @sainathk583
    @sainathk583 4 роки тому +102

    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.

  • @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!!!

  • @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

  • @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

  • @jefferymuter4659
    @jefferymuter4659 4 роки тому +6

    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.

  • @puppetmarion
    @puppetmarion 3 роки тому +1

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

  • @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!

  • @jenglish1986
    @jenglish1986 3 роки тому

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

  • @ssk7690
    @ssk7690 Рік тому

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

  • @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!

  • @paulofernando78
    @paulofernando78 Рік тому

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

  • @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.

  • @TheRajmoney
    @TheRajmoney 3 роки тому +3

    i like how this man explains the css.

  • @douglasfrb
    @douglasfrb 4 роки тому +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: ua-cam.com/video/val62cQaZiY/v-deo.html

  • @gavinkalaher7314
    @gavinkalaher7314 Рік тому +1

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

  • @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..😍

  • @smithnicholas7
    @smithnicholas7 Рік тому

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

  • @AyushKumar-yk9fw
    @AyushKumar-yk9fw 4 роки тому +40

    This video is extremely underrated!!! Why????

    • @wotizit
      @wotizit 3 роки тому

      because thats life

  • @AAfzal5
    @AAfzal5 3 роки тому

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

  • @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. || ua-cam.com/video/val62cQaZiY/v-deo.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. 😁🙌🏽

  • @shannonstumpf1861
    @shannonstumpf1861 2 роки тому

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

  • @evolution6247
    @evolution6247 Рік тому

    by far the best tutorial of a responsive navbar on UA-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 :)

  • @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 роки тому

      ua-cam.com/video/vh7obWOC3jY/v-deo.html please can you watch this video

  • @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!

  • @rooveloft5273
    @rooveloft5273 Рік тому

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

  • @producermind9030
    @producermind9030 3 роки тому +1

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

    • @hammavaqttv2273
      @hammavaqttv2273 3 роки тому

      ua-cam.com/video/vh7obWOC3jY/v-deo.html please can you watch this video

  • @nigelpallatt
    @nigelpallatt 4 роки тому +7

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

  • @jossiefxd
    @jossiefxd 3 роки тому

    this is my favorite youtube channel for learning

  • @MrViciousway
    @MrViciousway 4 роки тому +7

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

  • @AtactHD
    @AtactHD 3 роки тому +13

    This was amazing!
    Few things I added to mine that others might be interested in:
    1.) To keep the navbar at the top, add "position:fixed;" in the .navbar css
    2.) To have the navbar close when you click on an item, add the following in your js file":
    $(".navbar-links").click(function(){
    navbarLinks.classList.toggle('active')
    });

    • @moorech2000
      @moorech2000 2 роки тому

      Awesome, thank you, I like fixed navs. I also added this to the fixed positioning to make the nav go all the way across:
      width: 100%;
      top: 0;

    • @eysaak6157
      @eysaak6157 2 роки тому +1

      Hey, I tried adding this at the bottom of the code in the tutorial but it doesn't change anything. Where exactly are we suppose to add this to make the menu close after clicking a link?

  • @cadetsherly2322
    @cadetsherly2322 Рік тому

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

  • @AR0ES
    @AR0ES Рік тому +1

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

  • @kevinkisibo4878
    @kevinkisibo4878 10 місяців тому

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

  • @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.

  • @eggz1012
    @eggz1012 2 роки тому +1

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

  • @omegamotivation144
    @omegamotivation144 4 роки тому

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

  • @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!!!!!

  • @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 роки тому

      ua-cam.com/video/vh7obWOC3jY/v-deo.html please can you watch this video

  • @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!

  • @realjackofall
    @realjackofall 3 роки тому +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.

  • @notc0mputing
    @notc0mputing 2 роки тому +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! :)

  • @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!

  • @zarghamaijaz5933
    @zarghamaijaz5933 4 роки тому +6

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

  • @piercehicks1144
    @piercehicks1144 3 роки тому +1

    This is literally the best example

  • @dmike4real496
    @dmike4real496 3 роки тому

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

  • @willneve
    @willneve 3 роки тому +7

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

  • @borntoplay92
    @borntoplay92 3 роки тому

    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!

  • @astroflexx82
    @astroflexx82 Рік тому

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

  • @solcolombo6831
    @solcolombo6831 3 роки тому +1

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

  • @thenatricvibe3661
    @thenatricvibe3661 2 роки тому

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

  • @ro3843
    @ro3843 4 роки тому +4

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

  • @kingsleyabang3403
    @kingsleyabang3403 2 роки тому

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

  • @synxgaming121
    @synxgaming121 Рік тому

    Finally found useful navbar after try to find it for hour+

  • @vandv8783
    @vandv8783 2 роки тому

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

  • @LuckystrikeGFXer
    @LuckystrikeGFXer 5 років тому

    I find it cool that you got back to your roots with just doing straight tutorials to concepts!

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +2

      Thanks! I really enjoy making these types of videos, but they never seem to do very well. Hopefully, now that I have gotten better with making videos people will find them more interesting.

    • @LuckystrikeGFXer
      @LuckystrikeGFXer 5 років тому +2

      @@WebDevSimplified I think you should do what you enjoy doing. These type of videos are always helpful for people no matter how well they do.
      I don't know if you remember me from the beginnings but I recently started to work for a company that's making apps with Ionic which uses HTML, CSS and Javascript (well mostly Typescript) and thanks to your videos I have gotten enough knowledge to land this job. I may even get to do an apprenticeship there in a few months! I just want to thank you for what you are doing! Maybe you can talk or look into doing Ionic in your future videos.

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +2

      That is amazing! I remember you have been watching my videos since essentially the very beginning and have always been active in the comments.
      Congratulations on landing a job. It is a lot of hard work, but now you get to reap the rewards. I'm just glad I was able to help you get there!

    • @LuckystrikeGFXer
      @LuckystrikeGFXer 5 років тому

      @@WebDevSimplified Thanks, Ionic is quite overwhelming for a beginner but I am starting to get the hang of it and I get all the time I need to understand which I find really cool of the company.

    • @AnnieTaylorChen
      @AnnieTaylorChen 5 років тому

      @@LuckystrikeGFXer I heard quite some negative comments from experienced developers using Ionic. Mainly regarding performance. They say it can't be compared to apps written in Java or Swift. Have you tried it?

  • @Zeath22
    @Zeath22 3 роки тому +2

    if it's not working for you like it didn't for me for the last 6 hours
    you have to add defer in the tag after the src element

    • @kahanijag970
      @kahanijag970 3 роки тому +1

      Thanks man I was facing this error.
      Tons of thank to you ❤

  • @thanksyou9658
    @thanksyou9658 Рік тому

    Thanks! Very useful for my final year project!

  • @carlonnrivers
    @carlonnrivers 5 років тому +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  5 років тому +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.

  • @techniumtech4887
    @techniumtech4887 3 роки тому

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

  • @ananditaxia521
    @ananditaxia521 3 роки тому +1

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

  • @saadmalaeb8372
    @saadmalaeb8372 3 роки тому

    This tutorial is a hidden Gem 💎

  • @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.

  • @semnijipa2649
    @semnijipa2649 Рік тому

    Thank you very much for these essential pieces.

  • @aquasaurus1504
    @aquasaurus1504 2 роки тому +1

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

  • @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!

  • @hellodolly7989
    @hellodolly7989 4 роки тому +2

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

  • @mushfiqulislam21
    @mushfiqulislam21 Рік тому

    Most easiest way. And most helpful

  • @longevityfitgroup5472
    @longevityfitgroup5472 2 роки тому

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

  • @AGriffith
    @AGriffith 2 роки тому

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

  • @doronmarom7193
    @doronmarom7193 4 роки тому

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

  • @markharrington5826
    @markharrington5826 3 роки тому

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

  • @johnnychin9598
    @johnnychin9598 2 роки тому

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

  • @carterjm
    @carterjm 3 роки тому

    I 100% agree with you regarding bootstrap too.

  • @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 ❤❤❤

  • @philliphess6407
    @philliphess6407 Рік тому

    Excellent Video Kyle, also - Excellent shirt choice

  • @kularanjankindo1009
    @kularanjankindo1009 2 роки тому

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

  • @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

  • @datkumar1024
    @datkumar1024 2 місяці тому

    This should have been my first search result for responsive navbar lol

  • @WebDeveloper682
    @WebDeveloper682 Рік тому

    best developer i have ever seen

  • @LouxTom
    @LouxTom 4 роки тому +8

    Super! I was freaking out at the end, turns out I forgot to link the JS haha!

  • @nigelpallatt
    @nigelpallatt 4 роки тому +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).

  • @MichaelCampbell01
    @MichaelCampbell01 4 роки тому +5

    A trick I've seen is to have an actual checkbox with display-none that holds the toggle state. Make your hamburger a label with a `for` attribute to the checkbox, and then you can use that to style against with the :checked selector. No JS required.

  • @istvanbalogh2080
    @istvanbalogh2080 Рік тому +4

    For me the menu button doesn't get displayed. I even tried copy-pasting the whole code, but still nothing

  • @jackfrost8969
    @jackfrost8969 3 роки тому

    I wish I could give this a million likes

  • @JohnDoe-fv5cu
    @JohnDoe-fv5cu 5 років тому +2

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

  • @l.g3765
    @l.g3765 3 роки тому

    Your channel is essential.

  • @fromthestring5704
    @fromthestring5704 3 роки тому

    Excellent video. The narration is spot on.

  • @silviaaa
    @silviaaa Рік тому

    What an excellent, clear tutorial! Thank you!

  • @darkmatter85
    @darkmatter85 2 роки тому +1

    Thanks, you just earned another subscriber

  • @paulpancake
    @paulpancake Рік тому

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

  • @xinderen8816
    @xinderen8816 Рік тому +3

    hello! May I ask a question about why my toggle button doesn't work when I try to click it again to close it ? Thanks!

  • @audraogilvy2605
    @audraogilvy2605 2 роки тому

    Thank you - just what I was looking for!!

  • @gajju3152
    @gajju3152 3 роки тому

    It was really worth watching till end👍.....

  • @mariom4173
    @mariom4173 2 роки тому +2

    Nice video as always. Glad to have found this channel. One thing I'd like to say is that I think you should mention that we should use the attribute "defer" in the tag because without this attribute the js code didn't work properly (at least to me).

    • @_Greenflag_
      @_Greenflag_ 2 роки тому

      Weird, it means that you have a pretty outdated browser or very slow computer. The "defer" means that the JS will be executed after the page has finished loading. There is 3 lines of JS, so it's weird that it causes problem.

    • @navis2803
      @navis2803 2 роки тому

      @@_Greenflag_ actually its a problem for me as well and my computer isnt slow

    • @emprexvest
      @emprexvest Рік тому

      @@navis2803 Likewise, update to date browser on a fast computer.

  • @jakes36
    @jakes36 4 місяці тому +1

    This code works great! I have two issues with it that I would like help with: 1) I would like the toggle menu to show up on the right of the screen with the text aligned right, too, instead of the center or left, but no obvious code I plug in works; 2) each time I use the small toggled screen menu to go to a lower section of the page, and close the menu, the href="#" takes me back to the top of the page, so I can never read the spot I went to in the first place. Thanks!

  • @pini5076
    @pini5076 9 місяців тому

    Clear explanation!Thank you!

  • @TheFacu17
    @TheFacu17 2 роки тому

    Thanks for the explanation, nice video! Greetings from Argentina!

  • @darshanpagar1894
    @darshanpagar1894 2 роки тому

    wow never thought responsive navbar will be so simple

  • @-JeeyaKarki
    @-JeeyaKarki Рік тому

    Thanks alot bro, this video is too good for a navigation bar
    keep it up😊😊😊👍