FLEXBOX Responsive Navbar (with Logo) | Navigation Menu Bar with HTML, CSS & JavaScript

Learn how to create a responsive navbar step by step by using HTML, CSS, and Flexbox. There are many different methods of creating navigation menus in frontend development. In this video, you're going to learn how to build a very simple responsive navigation bar with Flexbox. You'll also see why using flexbox of CSS is beneficial for building responsive navbars.

Since the video is long, I've divided it into the following multiple sections:
(00:00) - INTRO
(00:30) - Creating the HTML Template
(01:30) - Styling the Navbar
(07:30) - Adding an example LOGO
(08:35) - Adding the Responsive Nav Menu Icon
(10:20) - Defining Media Queries for Mobile View
(11:00) - Building the Mobile Navigation Menu
(14:20) - Adding Functionality with JavaScript

Credits:

#navbar #responsivedesign #flexbox #html #css #flexbox #javascript

[welless]

You have no idea how happy I am lol. CSS positioning will drive you crazy, you've simplified it wonderfully. I'll finally be able to easily center my header!

[geee]

I have never called anyone a master. But you are a bible and a dictionary. and I have subscribed.

[jamesi.o]

I finished learning HTML, got stuck on css, mostly the navbar. Watched a lot of videos but those dudes just show they know how to code and not actually teaching.

But today i came across your video and i understood every i subscribed already, and gave a like.

Thanks for this tutorial, looking forward for more on web design coding.

Thanks once more...

[ufoteacher]

Extremely helpful! I have become an avid viewer of your tutorials on HTML and CSS. Much appreciated. I am feeling much more confident after learning from your videos. Please keep doing more videos.

[welless]

One of the BEST aspects of this marvelous tutorial is the use of developer tools. CSS positioning is inherently difficult at first, and the developer tools let you SEE each element's space/padding/alignment because the space is highlighted when you pass the cursor over the <li> or <div>, etc. Hence you see very quickly if you are in error, instead of not understanding why your change isn't working as expected.

[vinnym]

I wish u were my tutor in boot camp. Slick, clear & to the point, fantastic

[ralitsayordanova]

thaks a lot!!!!because of your video i did a great job!!!

[fajfaj]

Exactly what I needed, straight to the point. Thanks!

[shamaiunkabir]

Extremely helpful! Please keep doing more videos.

[amanization]

if this didn't work for you, try changing the active class to display:none, worked for me thank you for such awesome content.

[adamkollat]

Great video, exactly what I needed. Thank you.

[kashif-kazmi]

Very informative, straight forward and clear explanation.
Bundle of thanks for this video ✨❤️

[bellsnow]

This is what I'm looking for! Thankyou so much! ❤️ You got a New sub here :)

[oladimejisundaymichael]

Thanks for this video! The best I've watched. It's so good❤😇

[anaisa]

Thank you so much, very clear explanations and nice to listen to!

[ewenwong]

Clear instruction andvery very informative! Great work!

[nkanmuoverachioma]

Oh wow, you are a good teacher. thanks for this, one more subscriber to the list

[dinero]

HELP

When inputting the code below the lists does not inline block. I have the <li class="list-item">.

.nav-list .list-item {
display: inline-block;
}

[frankalvarez]

Thank you for teaching us the basics of a navbar! Great video Sir!

[meryemar]

kullanici ismine bakmadan menu deyisinden turk oldugunu anladim. harikasin cem cok guzel bir video olmus eline saglik.