How to create a CSS navigation bar in 6 minutes! 🧭
Vložit
- čas přidán 20. 09. 2023
- #CSS #tutorial #course
This is not a responsive navigation bar. It's meant to be an exercise for beginners to build a very basic navbar.
HTML CSS nav navigation tutorial example explained
Bro Code
Bro Code
Home
About
Products
Contact
This is the Home page
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam minus eveniet recusandae dicta similique numquam voluptas quos tempore cupiditate pariatur, laudantium fugit alias quia veritatis nesciunt quaerat molestias adipisci assumenda.
/* style.css */
body{
margin: 0px;
}
main{
margin-left: 20px;
margin-right: 20px;
}
h1{
text-align: center;
}
.navbar ul{
list-style-type: none;
background-color: hsl(0, 0%, 25%);
padding: 0px;
margin: 0px;
overflow: hidden;
}
.navbar a{
color: white;
text-decoration: none;
padding: 15px;
display: block;
text-align: center;
}
.navbar a:hover{
background-color: hsl(0, 0%, 10%);
}
.navbar li{
float: left;
}
How to I copy the code
It's better to use display flex than float.
i like it
Thank you 🎉
bro cooked and I ate
💯 Every vid
Yum
I Also Eat but I learn the recipe as well
ZANKS ZQADDDYIE
😂😂
You've got the best step-by-step videos. Thanks for all your work and sharing.
Straight to the point. Thank you!
Thanks so much. I've been searching for sooo long to find out how to do this.
just the thing i needed thanks for sharing this content👍
Amazing work
Best teacher.... 👌
Finally! A working code! thank you very much for this @Bro Code you save me from failling
the tutorial is simple and straightforward. thank youuuuuu❤❤❤
Epic bro
This guy is too good with his explanations
It’s straight to the point and easy to understand definitely one of the best
Best teacher 🧑🏫
THANKS I NEEDED THIS SO MUCH FOR SCHOOL PROJECT🎉🎉🎉🎉🎉
Make a video on how to put "LOGO" and adjust its height and width using "CSS" with according to our needs?
May god bless you ! Thank you save my life seriously
You are a gentleman and a scholar. Thanks
Very good person
Very helpful video
Thank you for the content
Appreciate this, thank you
This is what i need!! Thank you so much bro i will subscribe you
Nice bro
it is important to use main (can we use a div instead of main for main content
)
you are legend - thanks
very kind blogger
best coder
Thanks bro!
Very good,I love him
Thank you!!!
👍
great
Bro had to earn my subscription and he did it
it is Good
for anyone trying to make this responsive:
body{
margin: 0px;
}
main{
margin-left: 20px;
margin-right: 20px;
}
h1{
text-align: center;
}
.navbar{
background-color: hsl(0, 0%, 25%);
}
.navbar ul{
list-style: none;
padding: 0px;
margin: 0px;
display: inline-flex;
}
.navbar a{
color: white;
text-decoration: none;
padding: 15px;
display: block;
text-align: center;
}
.navbar a:hover{
background-color: hsl(0, 0%, 10%);
}
this uses flexbox and added .navbar{} so the background color stretches across the webpage
You're a lifesaver. Thanks!
Thx bro
❤
I don't understand why you added "overflow:hidden" to the CSS file? What is its purpose in this navbar?
so it doesn't show a scroll bar on the nav bar
Hi Bro Codez, Your tutorials is awesome. Please clarify my doubt, Some of the using Flexbox and Grid to align the navbar button but you didn't use that so please explain
which is correct.
I believe you want to use flex box to make it more responsive
why did u use "overflow:hidden" can u explain that part
like what did u hide exactly?
I want an answer to this as well. He did not explain at all.
it prevents horizontal scrolling
@@zoroskrx thanks I also needed that
@@zoroskrx But why does setting the property float:left make it disappear? I don't get it
Yes exactly @@pholcastaneda3699
Can you make a proper responsive website. It will be easy to add in my projects.😉
instead of using colors for navigation bar can i use images?
Bro really cooked
ty
extra challenge: style nav with flexbox
Sir Please am looking for how to creat contact form email, text using nave element instead of div element ?
How do I center the navigation br in the center of my webpage, it wants to all shift to the side but I want it to be about 100 pixels long and center with h1
How can I center the nav bar ? the only way i was able to get was creating a div section.
Try this:
.navbar li{
float: left;
width: 25%;
}
Of course 25% is for 4 elements as it equals 1/4 :)
You can also enter:
.navbar ul {
display: flex;
justify-content: center;
}
and then try lower the width percent to see the result and fit it to your expectations.
Using floats is not the way to do it. Flexbox takes care of that.
Sigma
What have I done wrong because my display:block and text align center is not working
My styled nav bar isn’t showing up on my second page the links are there it just isn’t styled like the home page, any thoughts?
lack of on your second page? Did you solve it?
@@bqadrat thanks a bunch man I appreciate your comment but I already passed the class so I’m set 😂
Damn I envy those who can speak English :(
Please add Indonesian subtitles 🙏, especially lessons about the 24-hour,12-hour,or 8-hour Java course, Java script, PHP, and others.😅
Your video is really great and I want to learn it but I have problems with the English it uses, especially the programming language lessons I want to learn.😅
Aowkaowkoakw pake translate ke bahasa Indonesia aja bang
If I want to float right why does my words reverse
1:50
Is it Responsive bro?
Nope
You can do it with the flex-box
Why mine isn't working😭😭
Does anyone know how to keep it vertical and to the left?
Adjust width of ul: 30%or 400 px
you could of just put margin: 0 20px;