How to create a CSS navigation bar in 6 minutes! 🧭
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 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.
Thanks so much. I've been searching for sooo long to find out how to do this.
Straight to the point. Thank you!
IVE BEEN LOOKING FOR THIS SO MUCH. Im so glad l found you bro
just the thing i needed thanks for sharing this content👍
Thank you for explaining while showing us how to do it. This makes it easier to understand. You are the best❤❤
Make a video on how to put "LOGO" and adjust its height and width using "CSS" with according to our needs?
Finally! A working code! thank you very much for this @Bro Code you save me from failling
Amazing work
THANKS I NEEDED THIS SO MUCH FOR SCHOOL PROJECT🎉🎉🎉🎉🎉
the tutorial is simple and straightforward. thank youuuuuu❤❤❤
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.... 👌
Epic bro
May god bless you ! Thank you save my life seriously
You are a gentleman and a scholar. Thanks
Very good person
Very helpful video
This is what i need!! Thank you so much bro i will subscribe you
Thank you for the content
Appreciate this, thank you
Best teacher 🧑🏫
it is important to use main (can we use a div instead of main for main content
)
Nice bro
you are legend - thanks
very kind blogger
Very good,I love him
Bro had to earn my subscription and he did it
Thanks bro!
best coder
👍
great
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
Thank you!!!
it is Good
instead of using colors for navigation bar can i use images?
Thx bro
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!
Sir Please am looking for how to creat contact form email, text using nave element instead of div element ?
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.😉
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
❤
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
Bro really cooked
extra challenge: style nav with flexbox
What have I done wrong because my display:block and text align center is not working
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.
I'm getting hover effect on logo how do i get rid of it help mee please ,🙋♀️
ty
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 😂
Using floats is not the way to do it. Flexbox takes care of that.
If I want to float right why does my words reverse
Sigma
Is it Responsive bro?
Nope
You can do it with the flex-box
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
1:50
Does anyone know how to keep it vertical and to the left?
Adjust width of ul: 30%or 400 px
Why mine isn't working😭😭
Bro chill ofc it doesn't because it's the nature of codding if it works is abnormal
you could of just put margin: 0 20px;