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

preview_player
Показать описание
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
Рекомендации по теме
Комментарии
Автор

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!

welless
Автор

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

geee
Автор

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

jamesi.o
Автор

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.

ufoteacher
Автор

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.

welless
Автор

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

vinnym
Автор

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

ralitsayordanova
Автор

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

fajfaj
Автор

Extremely helpful! Please keep doing more videos.

shamaiunkabir
Автор

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

amanization
Автор

Great video, exactly what I needed. Thank you.

adamkollat
Автор

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

kashif-kazmi
Автор

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

bellsnow
Автор

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

oladimejisundaymichael
Автор

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

anaisa
Автор

Clear instruction andvery very informative! Great work!

ewenwong
Автор

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

nkanmuoverachioma
Автор

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;
}

dinero
Автор

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

frankalvarez
Автор

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

meryemar
join shbcf.ru