Build a Responsive CSS Navbar in 16 Minutes

Learn how to build a responsive CSS navbar and Hamburger menu in only 16 minutes using flexbox and other css tricks!
// JOIN MY DISCORD CODING COMMUNITY
/ discord
// Support me on Ko-Fi
ko-fi.com/tyle...
// FOLLOW ME ON TWITTER
/ tyler_potts_
// MY GEAR FOR CODING AND KZbin
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.co...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@banderamusical]

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]

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

[@Shanelle-wy1xc]

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]

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

[@TylerPotts]

Glad it was helpful!

[@madrock182]

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]

Glad you like them!

[@davmich4654]

@@TylerPotts I love you man

[@本翔盧]

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

[@xzan1276]

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]

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

[@TylerPotts]

I'm happy you liked it :D

[@badermuteb4552]

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

[@dgia1000]

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

[@vokhactri]

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

[@codeFRONT.]

I was just abouts to say...

[@tyjeait]

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

[@TylerPotts]

You're very welcome!

[@bergjoel93]

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

[@davmich4654]

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]

Thank you, Joseph

[@alliscool4009]

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

[@SirCruz-ms5jp]

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

[@yao_barna]

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

[@FarhanTanmoy]

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?

[@pandora_fortnite3141]

how do you fix it

[@lilouachab57]

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

[@TylerPotts]

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

[@maax4041]

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

[@takayumaja9438]

Thank you so much Tyler Potts

[@blessednutsnick8060]

awesome vid, u ever post a part 2?

[@osmeig6025]

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

[@TylerPotts]

Thanks and SynthWave84

[@saurn1221]

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

[@cjjb]

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

[@TylerPotts]

Awesome, thank you!

[@mhn147]

Tahnk you!

[@ClockcloudStudios]

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]

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

[@kushagrapandey1275]

best tutorial i've ever found thxx !!

[@kaleblamar2232]

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

[@nientranai1669]

well explain. thank you so much

[@TylerPotts]

Glad it was helpful!

[@jonice4229]

your vscode looks awesome!

[@TylerPotts]

Glad you think so!

[@rangabharath4253]

Awesome as always 👍😀

[@TylerPotts]

Thanks for the visit

[@christinwilson6384]

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]

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

[@AlaSwekProductions]

Thank you! Working very good! You are awesome!

[@jalaleddinenader2108]

can u sahre code plz?

[@AlaSwekProductions]

@@jalaleddinenader2108 I don't have it anymore, I used it then

[@santiagomedinafiguera7280]

Great tutorial, bro. I found this on Twitter.

[@TylerPotts]

I appreciate it

[@hertderg12]

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.

[@Dhruvios]

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

[@punctdaniel]

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.

[@TylerPotts]

Great to hear!

[@paullassa219]

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

[@TylerPotts]

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

[@Reality23458]

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

[@sajad6011]

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

[@stevejacques6409]

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]

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

[@Ronniethesillyguy]

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

[@zeroclu]

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

[@kaungsithu3531]

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

[@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? :(

[@rekan_98]

can u provide the source code, please.?

[@KrXza]

why does my hamburger disappear when i resize the width smaller

[@Shanelle-wy1xc]

Will this work using semantics as well?

[@avtar2565]

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

[@aminkrasniqi8659]

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

[@SickPlayerfin]

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]

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

[@motivateurself9852]

great tutorial, could you please tell me while display

[@Unknwon__now]

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

[@anol4590]

Is there no dropdown menu?

[@vujadinovicc]

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

[@Chris-nk6qw]

great vid! where is part 2?

[@TylerPotts]

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

[@godusopp4222]

can i do this without js?

[@mancoking9051]

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

[@yanyanrey8598]

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

[@GtrFsg]

pleaze can I have the code

[@DK-pf2dg]

Please more Vue Composition Api vids

[@ezhukovroman]

Bam, Like!

[@TylerPotts]

Love that! :D

[@prudhvichinnam1488]

Keep doing tutorials and do CSS tricks and js tricks videos

[@HusseinOuda]

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!

[@rohanhassan9654]

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

[@BlackDev]

vscode

[@rohanhassan9654]

@@BlackDev thanks!

[@geee7672]

But where is the final part of this nav?

[@sajad6011]

Where is the other video?

[@felixongley2953]

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]

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

[@ftheriault]

This video where continus part2

[@rohanhassan9654]

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

[@parman438]

i have the same issue did you find a solution?

[@hardwired89]

❤️❤️❤️ content css js react.

[@shashanknavale7382]

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

[@TylerPotts]

Oh no, can you see any console errors?

[@benfisher543]

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

[@SwanzSkate]

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]

keep adjusting the figures till it looks better

[@kaedemc1]

im guessing your 2px in nth child 1 isnt negative

[@wes_333]

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

[@izi_cimpu0531]

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

[@TylerPotts]

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]

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

[@luc7106]

pls part 2

[@itzthecarver]

can you upload the source code!

[@tvvee]

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]

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

[@GlowingAviation]

7:41 REMIMDER FOR ME

[@dinakanwamu5676]

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

[@TylerPotts]

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

[@StratusWeather1]

5:20

[@dinakanwamu5676]

Is there a part 2

[@TylerPotts]

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.

[@djkeiran2172]

can we have source code

[@HoratioKJV]

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

[@Deus-lo-Vuilt]

nice video, like and sub

[@TylerPotts]

Thank you 👍

[@jameswaterson3883]

Please post the github link

[@TylerPotts]

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

[@Rebinde]

pls github src

[@Alex-sv8th]

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

[@CMoDZ3D]

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

[@A-Miracle000]

same lol what did you do ?

[@CMoDZ3D]

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

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. kzbin.info/www/bejne/hXeuc5imbpqfmJY

[@A-Miracle000]

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

[@A-Miracle000]

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

[@shakilahmed6870]

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

[@beatriz1598]

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

[@Stollie]

why u stealing my website

[@bricepowell7804]

gotta love not having the source code referenced...

[@TylerPotts]

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

[@wes_333]

you are going too fast buddy, please slow down

[@jorgerauljimenez3307]

Very bad tutorial. Yes