Flexbox Navbar Tutorial | Only HTML & CSS

[@borgestheborg]

Hands down the best tutorial I've come across on KZbin for making navbars, simple and straight to the point. Subbed!

[@je9625]

This is one of the best channels for frontend development on youtube.

[@johnborron1059]

One thing I really learned from this video was how to use comments in my code effectively. I tried following on, but it wasn't sinking in, so I went back, and every time you would do something new I would comment your verbal explanations in my code before the actual code itself. The way you described what you were going to do was just delightful. I've just read back through the code and realised I've constructed for myself a very useful resource.

[@thomasdemeersman7384]

You're a life saver , I couldn't figure out how to actually do this and every tutorial made it seem very complicated

[@dogonwall6680]

i've checked out so many navbar videos but this is so much beginner friendly and clean thankyou so much.

[@AnhTran-kk6li]

right, simple and straightforward. that's all we need after scrolling and watching tons of tutorials on this platform. Ty!

[@hamzaijaz6850]

its not just a tutorial it was a lesson and a great one. Angela did a great job explaining everything.

[@angeladesign737]

Thanks so much!

[@Cocodrillo3011]

Great vid! Easy to follow. Found the error in my code and made some adjustments after watching this video.

[@hananfadah]

Thank God I came across your brilliant video. Well done!

[@nicolapascal6379]

THANK YOU!!! I am struggling in school and this tutorial eased my stress.

[@charlestoneoyoo]

Wooow, this is so super...you cleared my doubts on this. Thank you for the new knowledge imparted. Looking forward to utilizing it fully

[@photoinshot1355]

Brilliant tutorial, very well explained and demonstrated. Thanks!

[@owusubossman4792]

You've got a new subscriber. You made it look so simple, thanks!

[@kabyleartiste3548]

that's the tutorial i was searching for . thank you so much , new sub!!

[@minimumviablepizza]

Simple and easy to follow. I tried a few and this was easily the best tutorial.

[@elliotbladen1324]

Best tut video I've watched. Easy step by step process with clear demonstration on how and why things were used

[@itsrichayoo]

Hello Angela, thanks for the tuts. Far too kind. Now I can build on what I have learnt here... PS: You ref nav-item a:hover ref's --clr-primary-dark instead if dark green.

[@OrlandoLoredo]

Great work! I love the concise, clear directions that you give. Thank you!

[@PaoPaw098]

Very underrated content. Keep it up!

[@angeladesign737]

Thank you!

[@devmarboy4045]

how do I change transition color help

[@babysudhirs9205]

continue this path and make great content without worrying about views and all, you'll reach a great level of success.

[@angeladesign737]

Thank you for the nice comment!

[@babysudhirs9205]

Wc :)

[@flyetimadtravel2157]

For making gap between flex items its better to use gap property. Nice tutorial for many newbies.

[@SeanJager-i4o]

the best channel no joke, i understand easy what u are saying!! Why u are quit??

[@JovanJovanov-r8b]

this is the best tutorial for a nav bar thanks for helping me

[@kahlschlag17]

Great thank you very much for this fast paced tutorial.

[@agustinfernandez8972]

Super simple tutorial love it!

[@OasisFinder]

Nicely done, I have one question, How can we remove the gaps which we see around the navbar ? like navbar is not sticking to the end and upper side

[@jamiemccallum833]

pretty damn straight forward , I forgot how to get the text to display inline instead of as a block

[@angeladesign737]

Happy it helped!

[@SachinYadav-eh7vg]

I was always getting stucked, how to place the logo to the left while keeping everything else to the right now its clear Thank you!!

[@angeladesign737]

Glad it was helpful!

[@rakanhasan6757]

@@angeladesign737 can we use self-align to move it?

[@kahlschlag17]

I resized an image to use as logo. For some reason it will not move to the right.

[@TiPPaZZ]

That's just awesome, just the right thing for me, thank you for that

[@Valentina-kr2gp]

thank you!! finally a girl who explains things to me🙏🏼

[@_Greenflag_]

Since you put the left element on "margin-right: auto;" the "justify-content: flex-end;" is even superfluous ; )

[@ke6944]

Thanks for such an awesome video, I'm new to web development and this tutorial really helps.

[@angeladesign737]

Happy it was helpful! Let me know if you would like to see a tutorial on a specific topic!

[@ke6944]

Just more tutorials on implementing Flexbox would be helpful. I like the flow of your tutorials it's concise and to the point.

[@fernandohawk5833]

Wow this was really useful!! Tysm!!

[@muhammadtalha6870]

Great Video you got one more Subscriber 👌👌👍👍

[@missionmit5645]

5:19 it's not working for me!!HELP!!!

[@Aaron-sy5yx]

Very nice. Why did you choose to make the donate a button instead of a link?

[@omareliotorrescastillo4808]

Thank you for your video, What should i do in order to put a search component in the middle of the nav bar using flexbox?

[@arunsaklani9890]

Is it necessary we use navbar before ul

[@paulcharman8113]

Does this change at all if you add a pre-created image as a logo instead of an icon?

[@gevorgsaghatelyan6793]

Just amazing. Thank you for your valuable content.

[@angeladesign737]

Thanks Gevorg!

[@nanda_8]

Could you please tell me how did you improve your CSS skill? Nice video :}

[@angeladesign737]

Thank you! I actually improved a lot by creating my own projects.

[@samuelklixe]

Easy to learn, thank you!

[@angeladesign737]

Glad it was helpful!

[@brooklyninja]

So so, good. Thank you.

[@shreeyadikshit5033]

Great video, awesome explanation... can you tell me how can I make it responsive?

[@Xi_Jing_ping]

Thank for this precious video its help a lot, i have a quenstion? which code editor are you using ?

[@angeladesign737]

Glad it was helpful! In this video I am using CodePen, the link to the code is in the description.

[@zarak5826]

Great tutorial. Thanks for this!

[@angeladesign737]

Thanks Zara!

[@airampg5031]

I love this tutorial thanks!

[@angeladesign737]

Glad it was helpful!

[@poojamann5394]

You are awesome. Thank you so much.

[@mdzaid3880]

Thank you for this awesome content*🔥

[@EmmanuelNgwandu]

Hello, thank you for the video. Kind of wondering if you can help with dropdowns with secondary dropdown on the nav bar!!!

[@angeladesign737]

Great video suggestion, thank you!

[@EmmanuelNgwandu]

@@angeladesign737 Thank you very much, Can't wait for it.

[@priyanshubhardwaj2158]

Use followed by inside of a tag to get the secondary dropdown.

[@habibikushal9738]

I love the way you explain the tutorial , very informative. May I make a request , if you can use visual studio code for more amazing videos and tutorials . Thank you🇿🇦

[@angeladesign737]

Great suggestion! Thanks!

[@kennw3244]

thanks, worked well. Now just to make it responsive

[@SeanJager-i4o]

Where is the root in css good for?

[@sandip_bettereveryday]

Really good job. It helped.

[@angeladesign737]

Thanks!

[@okbaalla8451]

What an outstanding nav bar I really liked it ... well as a beginner I want to ask you if I could use the following solutions : i create two divs one for the logo and one for the items on right where i use buttons and some css to make theme like yours and i use flexbox with a justify-content: space between to place each item to it side. Is it make sens or not ? Thx

[@angeladesign737]

That should work!

[@jackshofner8733]

Thanks for the video on a flexbox navigation bar! Can you add some drop down elements as well?

[@angeladesign737]

You can definitely add a dropdown; thats a good topic for a video. Thanks!

[@Ramza-SF]

Hey Angela, great video. One question, when I try to set margin-right as auto for the icon to move it to the far left of the nav bar, nothing seems to happen? The margin doesn't update or change when I inspect element in the web-browser box model. I am importing the font from font-awesome using tags if it matters? I tried display it inline and as a block with a fixed width and still nothing. Any ideas?

[@Ramza-SF]

I figured it out, it was to do with CSS specificity when trying to target the specific first li in question. Why did me using the class seletor for the UL and then first child not target the first li?

[@angeladesign737]

Did you use something like ul:first-child? That would target the first unordered list element instead of targeting the actual list item. In this demo I targeted the first item in the navigation bar by giving all of the nav items the same class of 'nav-items' and then writing nav-items:first-child to control the placement of the first one. Hope that helps!

[@Ramza-SF]

@@angeladesign737 Thanks for the reply! Is it a good practice to give each of the list items the same class? Would simply typing "li:first child" achieve the same result? I am assuming the individual classes is a good practice for specificity when you have multiple li elements in different ULs?

[@angeladesign737]

Writing 'li:first-child' would give you the same result but I agree with your comment about specificity. Another way to approach this would be to add a specific class to each ul in the project and then reference that class with the il. For example '.nav-list li:first-child' and then another list on the site might be '.content-list li:first-child'. In that way not every li would need a class. It just depends on how you want to set up the project.

[@michaelwiginton8587]

Thanks again. These are nice.

[@angeladesign737]

Happy they have been helpful!

[@Migler1]

Why is it that you don’t put your nav inside of a header tag?

[@angeladesign737]

You can definitely place it inside a header tag, since I only created the nav for this demonstration I did not include it.

[@frenchmike]

great tutorial

[@otsingul1]

Thank you so, so much!!!!

[@ayanarena1273]

Is this responsive or not

[@nishalamichhane3961]

nice video: useful thanks

[@nomanhossain8421]

this tutorial is too good.....

[@angeladesign737]

Thanks!

[@sigmiami]

Good video , very specific

[@angeladesign737]

Happy it was helpful!

[@sauronin2058]

Дуже дякую)

[@techxpertpcs]

Hi there thank you for the tutorial, i have a request if you don't mind. Could you please do a tutorial on how to close an overlay from a hamburger menu when an anchor tag is clicked. I have searched high and low and cannot find out how to do it. Many thanks in advance.

[@angeladesign737]

Thanks for the video suggestion!

[@sahidsk6494]

I love 😘 your tutorial ..

[@angeladesign737]

Thank you!

[@ritchiepetithomme7546]

it is the kind of video after watching it you just say to yourself Oh Gosh this is what I have been struggling with for so long look how easy it was. thank you for this amazing video

[@pmop1432]

Good work 🤌

[@jecapeca]

I don't know why nobody shrinks viewport to show us responsiveness of it. I can make this too, but, I can't make it to look normal (centered logo, nav under it with links in block) when I shrink it! Every tutorial finishes with the easiest part.

[@enthusefreelancer3440]

beautiful

[@kashmirtechtv2948]

Align items centre align vertically

[@ecu_fishing]

Good job! one things is not a tag, maybe :D no hate

[@angeladesign737]

Yup, my mistake!

[@forhadrh]

Nice! :)

[@angeladesign737]

Thanks! 😄

[@forhadrh]

@@angeladesign737 Wells 😁

[@ibrahimlita66]

thanks alot

[@ankit1yogesh]

👍🏻

[@kahlschlag17]

sorry I mean left.

[@syediqbalahmed3176]

vulu ... ok ...

[@420troll4]

style an anchor tag to look like a button. using the button tag in the manner in which you are is NOT semantically correct for HTML 5.0.