Build a Responsive CSS Navbar in 16 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ธ.ค. 2024

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

  • @本翔盧
    @本翔盧 2 ปีที่แล้ว +9

    3:44 html 結構
    15:40 hamburger 漢堡選單動畫
    11:15 hamburger js 邏輯
    12:20 hamburger RWD 設定

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

    I've seen a 1000 videos on Navbars and this one is the One that Rocked my World!, Thank you much Mr Tyler Potts!

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

      You're welcome I'm happy you liked it!

  • @Shanelle-wy1xc
    @Shanelle-wy1xc 10 หลายเดือนก่อน +1

    I was in charge off the html and css for a group project. This was the. Final touch I needed that I couldn’t find 😩 hoping to add it tomorrow and get a bonus for adding this!

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

    Stumbled across this on Reddit. This is the perfect tutorial for my current ability level. Thank you for making this!

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

      Glad it was helpful!

  • @madrock182
    @madrock182 2 ปีที่แล้ว +14

    Your videos are really well put together! As a new gumby web developer it is so easy to get lost and stuck while learning to program. You explain things super well and it gives me hope that I might actually figure this out 😂. Thanks so much! You have a great future here!

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

      Glad you like them!

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

      @@TylerPotts I love you man

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

    Hey, just need some help with the "justify-content: flex-end;" is not working. Any ideas on what could be the problem! But great vid.

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

      Maybe is a little late but I had the same issue and just let in that block the lines for display: none and justify-content: flex-end and it worked well

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

    you can use a vscode extension named Live server to serve static html file without installing http-server

    • @codeFRONT.
      @codeFRONT. 2 ปีที่แล้ว

      I was just abouts to say...

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

    I have a problem with the hamburgers, I wrote everything down straight away and it doesn't say I have a mistake. but still nothing happens when i press it

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

    you are the bet tyler. world class design. how to make the nav appear after click?

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

    Finally a simple and well-explained way to create this!

  • @SirCruz-ms5jp
    @SirCruz-ms5jp 2 ปีที่แล้ว +2

    Nice tutorials, Sir!.
    But may I ask, How to show the choices when we clicked then button?

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

    Thank you for this! I got it working perfectly! DId you ever do the next video on adding the "drawer"?! I don't know where to go from here!

  • @admniyeokuyorsun...3044
    @admniyeokuyorsun...3044 3 ปีที่แล้ว +4

    subbed and liked, straight to the point, beautiful code, and no bs, just the tutorial. I liked the style of the video.

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

      I'm happy you liked it :D

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

    Hi Tyler, I'm following along and at about 11:32 I have the X animation for the hamburger done successfully but it creates a rather lopsided X compared to the perfect looking one you have going on here. What do I modify to fix this?

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

      keep adjusting the figures till it looks better

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

      im guessing your 2px in nth child 1 isnt negative

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

      @@kaedemc1 you are a legend! i was struggling with the same issue haha. Thanks so much!

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

    I cannot get the is-active to work. When I click on it nothing happens 😑

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

    Wow, your works are great, the to-do list, how to create a stopwatch, all your videos I have watched, they are all amazing, helpful and easy to understand and follow, thanks for the tutorials, some knows how to do all these things, but they keep it to themselves, thank you for your time you spends in creating all these videos, all the tutorials thank you very much, God will keep increasing your knowledge in what you are doing thank you very much, I'm a beginner and I really want to be like you when I grow up

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

      Thank you, Joseph

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

      @@TylerPotts Hi Tyler, I am new to this channel, where is part 2?

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

    hi sir, i tried to link my js to my html and i think that i did evrything well but it doesnt work. it doesnt toggle when i click on it

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

      make sure you add the Javascript code on HTML just before it worked for me

  • @FarhanTanmoy
    @FarhanTanmoy 2 ปีที่แล้ว +6

    This is an amazing video. Very easy to follow for a beginner like myself. However, I couldn't find the video where you show how to make the drawer come out when the burger is clicked. Would you please help with this?

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

    Thanks for the video! Is the next video to show us how to add the draw-down menu out yet? Thanks!

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

    People have said this below, but the click when adding the javascript is not working. Any clue on why or how to fix it?

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

      Did u linked it in the script tag on your html code ?

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

    Hi, I would like to know how you jump from tag to tag. For example @1:29 you write "home" and jump to the next tag. Is that an extension or shortcut or what?

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

      Uhh I'm not sure it's just natural for me 😂

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

    Just found this video, way to explain, thanks! Cheers from Argentina.

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

    Wow, this is really what I a needed to learn to make my Navbar project responsive, thank you very much!.

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

      You're very welcome!

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

    where is the 2nd part of this video for the responsive? can i get a link because i cannot find it yet.

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

    Nice one mate. I've hit that bell icon for the next video! Looking forward to it.

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

      Awesome, thank you!

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

    somethings wrong with the js code for me, please help.

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

    best tutorial i've ever found thxx !!

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

    The button hover thing didnt work, it just made the background color show always, also, I put this on the main page, and it worked
    but then when I copied the code in the .html file and put it into another .html file, it didnt work, please tell me how to make it show on every page
    Also the click detector in javascript didnt work
    also the hamburger never shows up

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

    why does my hamburger disappear when i resize the width smaller

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

    Thx, I really needed a navbar you got a sub:)

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

    awesome vid, u ever post a part 2?

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

    For me - everything else is working except - I can't see the hamburger or the animation for it at all. Anyone know what the reason might be? :(

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

    Thank you so much Tyler Potts

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

    Thank you !!! Nice so many stuff to learn here. And so many videos you have done !!! What is the next ? :D

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

      Thank you and a lot more is coming!!! :D

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

    Hey just wondering if you ever did setup to dropdown for the spans. I couldnt seem to find a video

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

    it is not clear to me how we connect things that we write in html and transfer to css. I need a header with a picture, then a separate navigation bar below it, and when it scrolls down, keep it at the top, and below the navigation, there is content that is also separate from the navigation. my problem is that I don't know how to link what I write in html to edit it in css. which tags should I use. If anyone can help me I would be very grateful if you do not understand what I want to ask you then I can send you a picture

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

    pleaze can I have the code

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

    Great tutorial, bro. I found this on Twitter.

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

    your vscode looks awesome!

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

      Glad you think so!

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

    can u provide the source code, please.?

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

    Is there no dropdown menu?

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

    Excellent video! What theme do you use in your visual studio code?

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

      Thanks and SynthWave84

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

    great tutorial, could you please tell me while display

  • @Shanelle-wy1xc
    @Shanelle-wy1xc 10 หลายเดือนก่อน

    Will this work using semantics as well?

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

    Hi tyler, i got a lil troub Mine just apears on left

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

    can i do this without js?

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

    well explain. thank you so much

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

      Glad it was helpful!

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

    Awesome as always 👍😀

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

      Thanks for the visit

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

    Where is the other video?

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

    hey bro can u recommend a advance css course , where i can learn things like this, i already completed beginner course but that was not near to this funcanility

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

    I'm having some problems with the hamburger menu, it positions itself underneath the title rather than on the right of the screen. Please help

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

      I am having the same problem. Did you fix it yet?

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

    Thank you! Working very good! You are awesome!

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

    Can you make the next part pls i really need this is the only good tutorial i found

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

    this was a great video man, i cant seem to find the continuation where you make the dropdown menu for the hamburger

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

      It should be on my channel, sorry for not linking in the description

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

      @@TylerPotts I wasent able to find it on your channel

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

      @@TylerPotts I can’t find it on your channel

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

    But where is the final part of this nav?

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

    Tahnk you!

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

    i followed the tutorial step by step but my spans dont rotate.
    any help?

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

      Sorry to hear that! If you join my discord server (link in desc) you can leave a post in our forum to get help!

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

      @@TylerPotts i solved that nvm. But where is the second part to the video?

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

    I'm trying to find the next video but impossible, heve you got a link of maybe the source code ? Thanks for this tutorial

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

    This JavaScript part doesn’t work for me the hamburger animation

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

      Oh no, can you see any console errors?

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

      @@TylerPotts me too I think its a problem with the classList element

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

    can you upload the source code!

  • @Chris-nk6qw
    @Chris-nk6qw 2 ปีที่แล้ว +1

    great vid!
    where is part 2?

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

      Thank you and sorry I haven't made a part two, I'll look into it in the near future.

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

    Thanks for the knowledge sharing. Easy to follow. I am a complete beginner and I am coding along to get a bit of the flow. After will jump in creating my own navbars/ contact forms, the basics and maybe after 1 year from now I will be quite good at creating basics and can beginn learning JavaScript.

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

    What's the name of the program that you use? I'm completely new to coding.

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

    Excellent video and explanation
    But the video ended and the list was not linked when placing the mobile it should be a drop-down list!

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

    for the life of me cannot get the .hamburger.is-active transform to work. added is-active as a class to the hamburger button and nothing changes.

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

    My JavaScript isn't working but it's identical to yours! Do I need some extension or something?

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

      i have the same issue did you find a solution?

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

    all good bro u just forgot too put the page that should open after you click the hamburger

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

    Bam, Like!

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

    Is there a part 2

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

      Sorry no, but I'll try create the part two later on. Although I have covered a similar video that could be classed as part two in a different video.

  • @DK-pf2dg
    @DK-pf2dg 3 ปีที่แล้ว +1

    Please more Vue Composition Api vids

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

    how can i continue making my main part after this? Im so stupid lol but i'm lost. Thx for the tutorial tho, it's great

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

      Thanks for watching and sorry I'm not sure where you are, I do have more tutorials that cover the navigation bars

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

    Awesome Video is there any way we can access the code files in the video

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

      Sorry if its not in the description then I might have lost the files! My apologies!

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

    Keep doing tutorials and do CSS tricks and js tricks videos

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

    can we have source code

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

    Please post the github link

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

      Sorry, there is not a Github link for this project.

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

    ❤️❤️❤️ content css js react.

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

    pls part 2

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

    This video where continus part2

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

    Where do you get the patience from to still write vanilla CSS now that frameworks such as Tailwind exist?

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

    7:41 REMIMDER FOR ME

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

    pls github src

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

    5:20

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

    damn i just watched this for nothing lmao. no part 2?

    • @A-Miracle000
      @A-Miracle000 3 ปีที่แล้ว

      same lol what did you do ?

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

      @@A-Miracle000 i already know the majority of making a nav so the full video was pointless lol i needed to know how to make a working hamburger menu

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

      Apologies, no idea why I decided to make only half a video... Here's how I turn a navbar into a slide out hamburger menu. th-cam.com/video/OFKBep95lb4/w-d-xo.html

    • @A-Miracle000
      @A-Miracle000 3 ปีที่แล้ว

      @@CMoDZ3D same I don't know how to make the menu :(

    • @A-Miracle000
      @A-Miracle000 3 ปีที่แล้ว

      @@TylerPotts thank you i will check it out ^ ^

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 ปีที่แล้ว +1

    nice video, like and sub

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

    why u stealing my website

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

    I checked your channel and you did not upload the second part. So you have literally wasted 1 hour of my life. What the heck man??

  • @Alex-sv8th
    @Alex-sv8th 3 ปีที่แล้ว

    Using multiples of 16px instead of rem would hurt my head, too much unnecessary maths required

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

    sorry but it's useless if you don't teach us how to do the dropdown thing 😅😭 I had to look for another tutorial to do it all over again

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

    gotta love not having the source code referenced...

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

      Sorry not all videos do as my GitHub had issues when recording this

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

    you are going too fast buddy, please slow down

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

    Very bad tutorial. Yes