How to create a CSS navigation bar in 6 minutes! 🧭

#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

[@BroCodez]

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

[@emmanuelanallemina4321]

How to I copy the code

[@rayyanabdulwajid7681]

It's better to use display flex than float.

[@MAALIK-ULMULK]

i like it

[@walidwalid1669]

Thank you 🎉

[@zoroskrx]

bro cooked and I ate

[@Fl_ninja]

💯 Every vid

[@Enryu071]

Yum

[@Chahatkajalwa]

I Also Eat but I learn the recipe as well

[@evanauli8092]

ZANKS ZQADDDYIE

[@rizwinrz8468]

😂😂

[@StopWhining491]

You've got the best step-by-step videos. Thanks for all your work and sharing.

[@Legomaniac359]

Straight to the point. Thank you!

[@ayannasir6653]

Make a video on how to put "LOGO" and adjust its height and width using "CSS" with according to our needs?

[@amandapanda3750]

Thanks so much. I've been searching for sooo long to find out how to do this.

[@supreme_wx2499]

IVE BEEN LOOKING FOR THIS SO MUCH. Im so glad l found you bro

[@mr.shredder5430]

just the thing i needed thanks for sharing this content👍

[@deborahtshiyeya307]

Thank you for explaining while showing us how to do it. This makes it easier to understand. You are the best❤❤

[@maricarlacerna5841]

Finally! A working code! thank you very much for this @Bro Code you save me from failling

[@JanviMali155]

Amazing work

[@richardolajiga3176]

This guy is too good with his explanations

[@l-fitness3590]

It’s straight to the point and easy to understand definitely one of the best

[@dmojela1625]

Best teacher.... 👌

[@suyashman7964]

Epic bro

[@hyzlskyy]

the tutorial is simple and straightforward. thank youuuuuu❤❤❤

[@nicodiangelotheghostking2]

THANKS I NEEDED THIS SO MUCH FOR SCHOOL PROJECT🎉🎉🎉🎉🎉

[@MdHossainAhmed-sc4ui]

Very helpful video

[@amitcoc7840]

Best teacher 🧑‍🏫

[@abdullahbiswas1]

Thank you for the content

[@Asulescu]

May god bless you ! Thank you save my life seriously

[@hertechera]

Appreciate this, thank you

[@iangabriel1031]

This is what i need!! Thank you so much bro i will subscribe you

[@jakry_apexlegends]

You are a gentleman and a scholar. Thanks

[@Freeteechingresiurce87409]

Very good person

[@bamanbamni]

it is important to use main (can we use a div instead of main for main content
)

[@mohaimenpotawan2842]

very kind blogger

[@Vivek_top_09]

Nice bro

[@ayushlimbu8044]

Thanks bro!

[@Roblox_oyuncu97info]

you are legend - thanks

[@NnFace-ql3jo]

best coder

[@princeshukraan3099]

Very good,I love him

[@ayeshasiddika1252]

great

[@shanepelletier2347]

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

[@flinch9710]

You're a lifesaver. Thanks!

[@ludwajzsk2758]

👍

[@NaftaliKipkoech]

Bro had to earn my subscription and he did it

[@chamnabkem5459]

Thank you!!!

[@ethioictmedia]

it is Good

[@user-cu9pd2kv2q]

Thx bro

[@waltermitty4132]

I don't understand why you added "overflow:hidden" to the CSS file? What is its purpose in this navbar?

[@inoscopedjfk8207]

so it doesn't show a scroll bar on the nav bar

[@yashaswimohod9647]

Can you make a proper responsive website. It will be easy to add in my projects.😉

[@nazmoonnahar9996]

Bro really cooked

[@user-lg8ms8pw6z]

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.

[@felcynchannel840]

I believe you want to use flex box to make it more responsive

[@adejaya1692]

❤

[@SpongeknobSquarenut]

instead of using colors for navigation bar can i use images?

[@chilli_Tea]

extra challenge: style nav with flexbox

[@brightasinde7034]

Sir Please am looking for how to creat contact form email, text using nave element instead of div element ?

[@prithurajvidyadas2850]

why did u use "overflow:hidden" can u explain that part
like what did u hide exactly?

[@omairtech6711]

I want an answer to this as well. He did not explain at all.

[@zoroskrx]

it prevents horizontal scrolling

[@memefromtheinternet]

@@zoroskrx thanks I also needed that

[@pholcastaneda3699]

@@zoroskrx But why does setting the property float:left make it disappear? I don't get it

[@cuteminired6550]

Yes exactly ​@@pholcastaneda3699

[@kyonsmith9859]

ty

[@asa-od9pu]

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

[@johnryder8464]

Using floats is not the way to do it. Flexbox takes care of that.

[@nathansimelane562]

What have I done wrong because my display:block and text align center is not working

[@nabinkhadka6270]

Just make a container display flex
It's easy

[@gian-mm9kr]

How can I center the nav bar ? the only way i was able to get was creating a div section.

[@bqadrat]

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.

[@Pavan-gq3ld]

I'm getting hover effect on logo how do i get rid of it help mee please ,🙋‍♀️

[@kiddReyes]

If I want to float right why does my words reverse

[@GiorgiTarielashvili]

Sigma

[@haloholahehe4285]

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

[@haloholahehe4285]

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

[@Pororo1726]

Aowkaowkoakw pake translate ke bahasa Indonesia aja bang

[@EnderKyo]

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?

[@bqadrat]

lack of on your second page? Did you solve it?

[@EnderKyo]

@@bqadrat thanks a bunch man I appreciate your comment but I already passed the class so I’m set 😂

[@patriayvida4209]

Is it Responsive bro?

[@Peywan]

Nope

[@jivara5523]

You can do it with the flex-box

[@SD88237]

1:50

[@EnderKyo]

Does anyone know how to keep it vertical and to the left?

[@ishwardayalgarg8097]

Adjust width of ul: 30%or 400 px

[@athenadaniellacruz8968]

Why mine isn't working😭😭

[@_a.p.o.n]

Bro chill ofc it doesn't because it's the nature of codding if it works is abnormal

[@AlThePal78]

you could of just put margin: 0 20px;