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.

[@iamhere090]

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!

[@amandapanda3750]

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

[@mr.shredder5430]

just the thing i needed thanks for sharing this content👍

[@suyashman7964]

Epic bro

[@dmojela1625]

Best teacher.... 👌

[@maricarlacerna5841]

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

[@MdHossainAhmed-sc4ui]

Very helpful video

[@nicodiangelotheghostking2]

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

[@abdullahbiswas1]

Thank you for the content

[@amitcoc7840]

Best teacher 🧑‍🏫

[@hyzlskyy]

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

[@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

[@Asulescu]

May god bless you ! Thank you save my life seriously

[@ayannasir6653]

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

[@hertechera]

Appreciate this, thank you

[@jakry_apexlegends]

You are a gentleman and a scholar. Thanks

[@Freeteechingresiurce87409]

Very good person

[@iangabriel1031]

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

[@mohaimenpotawan2842]

very kind blogger

[@Roblox_oyuncu97info]

you are legend - thanks

[@ayushlimbu8044]

Thanks bro!

[@princeshukraan3099]

Very good,I love him

[@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!

[@NnFace-ql3jo]

best coder

[@chamnabkem5459]

Thank you!!!

[@Vivek_top_09]

Nice bro

[@ayeshasiddika1252]

great

[@ludwajzsk2758]

👍

[@ethioictmedia]

it is Good

[@user-cu9pd2kv2q]

Thx bro

[@bamanbamni]

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

[@NaftaliKipkoech]

Bro had to earn my subscription and he did it

[@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

[@adejaya1692]

❤

[@yashaswimohod9647]

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

[@kyonsmith9859]

ty

[@SpongeknobSquarenut]

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

[@nazmoonnahar9996]

Bro really cooked

[@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 ?

[@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

[@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

[@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.

[@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

[@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

[@SD88237]

1:50

[@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 😂

[@athenadaniellacruz8968]

Why mine isn't working😭😭

[@patriayvida4209]

Is it Responsive bro?

[@Peywan]

Nope

[@jivara5523]

You can do it with the flex-box

[@EnderKyo]

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

[@ishwardayalgarg8097]

Adjust width of ul: 30%or 400 px

[@AlThePal78]

you could of just put margin: 0 20px;