FLEXBOX Responsive Navbar (with Logo) | Navigation Menu Bar with HTML, CSS & 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!

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

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.

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

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

Clear instruction andvery very informative! Great work!

Great video, exactly what I needed. Thank you.

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

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

Such an amazing tutorial... Thanks a lot for this one.

Extremely helpful! Please keep doing more videos.

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

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

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 thing...... i subscribed already, and gave a like. Thanks for this tutorial, looking forward for more on web design coding. Thanks once more...

Thanks a lot for your video. Helped me a lot in my project.

You explain very clearly🤗 thanks

Thanks a lot dude. Great tutorial!

Thanks a lot, perfect tuto !

Nice tutorial! Thx!

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 or , etc. Hence you see very quickly if you are in error, instead of not understanding why your change isn't working as expected.

Fantastic work and video ! Keep going !

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

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

Thank you so much for this❤

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

HELP When inputting the code below the lists does not inline block. I have the . .nav-list .list-item { display: inline-block; }

great tutorial, I thank you. Please help me with 2 things 1. how to add an active class to highlight the current page 2. add a transition on the mobile menu collapse the best easy tutorial by far

Amazing work. I would like to know can we make the list items cover whole available space below the logo and hamburger. If phone is in landscape mode or portrait mode the list items should cover full screen. Can you please show how to achieve it, if possible a sequel to this video :)

Good and easy tutorial!

thankssss so much !!

nice work man,

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

wow awesome

Thanks brother

Amazing

thanks a lot,

Amazing work Cem. Like always perfect !!!! ;) Cem to the moon ;) see ya my friend

thanks🙏

hey i have a problem on the js part i did the dame thing but when i click it doesnt display the menu :( can you help me

Fabulous

Привіт з України ! Дякую друже , це було круто , підписався на ваш канал , у вас багато цікавого для мене як початківця у справі програмування !

Excellent tutorial! Thank you for your time and good explanation.

How do I keep visual stuido code on top even when touching chrome, is there a way to have it always on top?

Thanks

hello @cem eygi media tesekurler for your video, please im copying the same code by the display: inline-block; is not working for me

When I click on the hamburger menu my list is not vertical, it remain horizontal but i put Display: block; how can i resolve it? Thank you :)

Hi! May I ask what program you are using to code that has real time preview?

so nice video. can you please explain me 16:56 how classList came there. thank you

which app are you using?

nice video sir! please explain how to make logo and list item float to the corners?

GL bro

Hmm, the inline-block doesn't change anything for me. Still a vertical list for me. Adding inline-flex under .nav-list only does make it a horizontal list. Not sure what's wrong.

i wish you could add animation to this opening navbar

So the navbar is not separate to the flex box, you are just stretching the nav bar - would have been good if the flex box was able to stretch and adjoined with the navbar.

Sir I have an error that is cannot read properties of null (reading ' addEventListener')

Nah, too

Merci pour ce tuto excellent. J'ai une navigation dropdown multilevel mais pas en flexbox. je voudrais savoir si je dois aussi mettre le display flex au submenu ? merci. code: @charset "UTF-8"; .navigation {V height: 70px; background: #262626; } .brand { position: absolute; padding-left: 20px; float: left; line-height: 70px; text-transform: uppercase; font-size: 1.4em; } .brand a, .brand a:visited { color: #ffffff; text-decoration: none; } .nav-container { max-width: 1000px; margin: 0 auto; } nav { float: right; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { float: left; position: relative; } nav ul li a, nav ul li a:visited { display: block; padding: 0 20px; line-height: 70px; background: #262626; color: #ffffff; text-decoration: none; } nav ul li a:hover, nav ul li a:visited:hover { background: #2581DC; color: #ffffff; } nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after { padding-left: 4px; content: " ▾"; } nav ul li ul li { min-width: 190px; } nav ul li ul li a { padding: 15px; line-height: 20px; } .nav-dropdown { position: absolute; display: none; z-index: 1; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); } /* Mobile navigation */ .nav-mobile { display: none; position: absolute; top: 0; right: 0; background: #262626; height: 70px; width: 70px; } @media only screen and (max-width: 798px) { .nav-mobile { display: block; } nav { width: 100%; padding: 70px 0 15px; } nav ul { display: none; } nav ul li { float: none; } nav ul li a { padding: 15px; line-height: 20px; } nav ul li ul li a { padding-left: 30px; } .nav-dropdown { position: static; } } @media screen and (min-width: 799px) { .nav-list { display: block !important; } } #nav-toggle { position: absolute; left: 18px; top: 22px; cursor: pointer; padding: 10px 35px 16px 0px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: #ffffff; position: absolute; display: block; content: ""; transition: all 300ms ease-in-out; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); } article { max-width: 1000px; margin: 0 auto; padding: 10px; }

niye türkçe konuşmuyon? yoksa bizi beğenmiyon mu

Shouldn't that be inside header

please give us your instagram id for further references,doubts and for clarification..

Thanks