FLEXBOX Responsive Navbar (with Logo) | Navigation Menu Bar with HTML, CSS & JavaScript
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- 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
Link for my other CSS Flexbox Tutorials: • CSS Flexbox Tutorials ...
Credits:
Logo Website: www.flaticon.com
Logo Creator: www.flaticon.com/de/autoren/f...
#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!
Thank you so much, keep up the good work! 👍
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!
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.
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.
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...
kullanici ismine bakmadan menu deyisinden turk oldugunu anladim. harikasin cem cok guzel bir video olmus eline saglik.
I wish u were my tutor in boot camp. Slick, clear & to the point, fantastic
thank you :)
thaks a lot!!!!because of your video i did a great job!!!
You explain very clearly🤗 thanks
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 :)
Extremely helpful! Please keep doing more videos.
HELP
When inputting the code below the lists does not inline block. I have the .
.nav-list .list-item {
display: inline-block;
}
i think it should be .nav-list li { display: inline-block; }
Thanks a lot dude. Great tutorial!
Thanks for this video! The best I've watched. It's so good❤😇
Thanks a lot for your video. Helped me a lot in my project.
Thank you so much for this❤
Nice tutorial! Thx!
Thanks a lot, perfect tuto !
Fantastic work and video ! Keep going !
Thank you! 😊
if this didn't work for you, try changing the active class to display:none, worked for me thank you for such awesome content.
Top! I needed that. Works! Thanks!
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.
thankssss so much !!
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
Thanks brother
How do I keep visual stuido code on top even when touching chrome, is there a way to have it always on top?
wow awesome
Good and easy tutorial!
Thanks! :)
nice work man,
Amazing work Cem. Like always perfect !!!! ;) Cem to the moon ;) see ya my friend
Thank you so much for always being supportive! :)
Fabulous
thanks🙏
thanks a lot,
Amazing
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
Thanks
Excellent tutorial! Thank you for your time and good explanation.
Hi!
May I ask what program you are using to code that has real time preview?
i use vs code and its live preview extension
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 :)
which app are you using?
so nice video. can you please explain me 16:56 how classList came there. thank you
Thank you :) That's a built-in JS property. See here for more: www.w3schools.com/jsref/prop_element_classlist.asp
nice video sir!
please explain how to make logo and list item float to the corners?
He used the position elements in the video, you can cross check again
GL bro
i wish you could add animation to this opening navbar
Привіт з України ! Дякую друже , це було круто , підписався на ваш канал , у вас багато цікавого для мене як початківця у справі програмування !
Слава Украïнi!
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.
Hey, did you make sure you added the list-item class in each list item? I had the same problem and then realized I'm an idiot haha
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')
same
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