Build a Responsive CSS Navbar in 16 Minutes
HTML-код
- Опубликовано: 19 апр 2021
- 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/tylerpotts
// FOLLOW ME ON TWITTER
/ tyler_potts_
// MY GEAR FOR CODING AND RUclips
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.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE 
Хобби
I've seen a 1000 videos on Navbars and this one is the One that Rocked my World!, Thank you much Mr Tyler Potts!
You're welcome I'm happy you liked it!
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!
Stumbled across this on Reddit. This is the perfect tutorial for my current ability level. Thank you for making this!
Glad it was helpful!
subbed and liked, straight to the point, beautiful code, and no bs, just the tutorial. I liked the style of the video.
I'm happy you liked it :D
3:44 html 結構
15:40 hamburger 漢堡選單動畫
11:15 hamburger js 邏輯
12:20 hamburger RWD 設定
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!
Glad you like them!
@@TylerPotts I love you man
Finally a simple and well-explained way to create this!
Thank you so much Tyler Potts
Just found this video, way to explain, thanks! Cheers from Argentina.
Thx, I really needed a navbar you got a sub:)
best tutorial i've ever found thxx !!
Wow, this is really what I a needed to learn to make my Navbar project responsive, thank you very much!.
You're very welcome!
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!
Awesome as always 👍😀
Thanks for the visit
Tahnk you!
Nice one mate. I've hit that bell icon for the next video! Looking forward to it.
Awesome, thank you!
well explain. thank you so much
Glad it was helpful!
Thanks for the video! Is the next video to show us how to add the draw-down menu out yet? Thanks!
Thank you !!! Nice so many stuff to learn here. And so many videos you have done !!! What is the next ? :D
Thank you and a lot more is coming!!! :D
awesome vid, u ever post a part 2?
Thank you! Working very good! You are awesome!
can u sahre code plz?
@@jalaleddinenader2108 I don't have it anymore, I used it then
you can use a vscode extension named Live server to serve static html file without installing http-server
I was just abouts to say...
you are the bet tyler. world class design. how to make the nav appear after click?
Excellent video! What theme do you use in your visual studio code?
Thanks and SynthWave84
Hey just wondering if you ever did setup to dropdown for the spans. I couldnt seem to find a video
Nice tutorials, Sir!.
But may I ask, How to show the choices when we clicked then button?
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
Thank you, Joseph
@@TylerPotts Hi Tyler, I am new to this channel, where is part 2?
your vscode looks awesome!
Glad you think so!
Great tutorial, bro. I found this on Twitter.
I appreciate it
Can you make the next part pls i really need this is the only good tutorial i found
great tutorial, could you please tell me while display
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.
Great to hear!
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
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?
how do you fix it
this was a great video man, i cant seem to find the continuation where you make the dropdown menu for the hamburger
It should be on my channel, sorry for not linking in the description
@@TylerPotts I wasent able to find it on your channel
@@TylerPotts I can’t find it on your channel
Will this work using semantics as well?
where is the 2nd part of this video for the responsive? can i get a link because i cannot find it yet.
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
Keep doing tutorials and do CSS tricks and js tricks videos
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
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.
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
I'm trying to find the next video but impossible, heve you got a link of maybe the source code ? Thanks for this tutorial
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?
Uhh I'm not sure it's just natural for me 😂
I cannot get the is-active to work. When I click on it nothing happens 😑
Hi tyler, i got a lil troub Mine just apears on left
can i do this without js?
Is there no dropdown menu?
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? :(
somethings wrong with the js code for me, please help.
why does my hamburger disappear when i resize the width smaller
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
make sure you add the Javascript code on HTML just before it worked for me
can u provide the source code, please.?
pls part 2
Bam, Like!
Love that! :D
Where is the other video?
great vid!
where is part 2?
Thank you and sorry I haven't made a part two, I'll look into it in the near future.
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?
keep adjusting the figures till it looks better
im guessing your 2px in nth child 1 isnt negative
@@kaedemc1 you are a legend! i was struggling with the same issue haha. Thanks so much!
People have said this below, but the click when adding the javascript is not working. Any clue on why or how to fix it?
Did u linked it in the script tag on your html code ?
❤️❤️❤️ content css js react.
Please more Vue Composition Api vids
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
I am having the same problem. Did you fix it yet?
But where is the final part of this nav?
pleaze can I have the code
My JavaScript isn't working but it's identical to yours! Do I need some extension or something?
i have the same issue did you find a solution?
What's the name of the program that you use? I'm completely new to coding.
vscode
@@BlackDev thanks!
Awesome Video is there any way we can access the code files in the video
Sorry if its not in the description then I might have lost the files! My apologies!
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!
all good bro u just forgot too put the page that should open after you click the hamburger
This video where continus part2
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
Thanks for watching and sorry I'm not sure where you are, I do have more tutorials that cover the navigation bars
Is there a part 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.
nice video, like and sub
Thank you 👍
can you upload the source code!
i followed the tutorial step by step but my spans dont rotate.
any help?
Sorry to hear that! If you join my discord server (link in desc) you can leave a post in our forum to get help!
@@TylerPotts i solved that nvm. But where is the second part to the video?
7:41 REMIMDER FOR ME
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.
This JavaScript part doesn’t work for me the hamburger animation
Oh no, can you see any console errors?
@@TylerPotts me too I think its a problem with the classList element
can we have source code
5:20
Where do you get the patience from to still write vanilla CSS now that frameworks such as Tailwind exist?
Please post the github link
Sorry, there is not a Github link for this project.
pls github src
damn i just watched this for nothing lmao. no part 2?
same lol what did you do ?
@@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
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. ruclips.net/video/OFKBep95lb4/видео.html
@@CMoDZ3D same I don't know how to make the menu :(
@@TylerPotts thank you i will check it out ^ ^
Using multiples of 16px instead of rem would hurt my head, too much unnecessary maths required
why u stealing my website
gotta love not having the source code referenced...
Sorry not all videos do as my GitHub had issues when recording this
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
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??
you are going too fast buddy, please slow down
Very bad tutorial. Yes