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

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

[@iamaffan090]

i like it

[@walidwalid1669]

Thank you 🎉

[@Nocontenthere1039]

Brotha, where is the CSS file?! I really need it for my new project 😢😅

[@StopWhining491]

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

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

[@Kieselsteo]

Yo bro it seems like u know about this. Can u help me with something ? I did everything like in the video but my Navigation Bar is not going horizontally. So picture it like that. It is vertically and the elements still take up the entire lenght of the browser as if they were div elements. How do I solve this bc I literally made everything exactly like in the video ...

[@1stlyrics-s9c]

This video humbles me lol. I do a lot of style, while this guy just make it simple and efficient. goodwork

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

[@devd3]

bro cooked and I ate

[@Fl_ninja]

💯 Every vid

[@Enryu071]

Yum

[@Luxorafashion000]

I Also Eat but I learn the recipe as well

[@evanauli8092]

ZANKS ZQADDDYIE

[@rizwinrz8468]

😂😂

[@Legomaniac359]

Straight to the point. Thank you!

[@jakry_apexlegends]

You are a gentleman and a scholar. Thanks

[@Freeteechingresiurce87409]

Very good person

[@supreme_wx2499]

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

[@maricarlacerna5841]

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

[@waltermitty4132]

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

[@realnoscope]

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

[@InterestingLake]

Awesome tutorial, thanks!

[@deborahtshiyeya307]

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

[@user-dk9of1ok1n]

You are the best Bro. Stay blessed 🙌

[@happytofu5]

Oh man already the third video I watch from you today. You really cover it all, thanks bro!

[@GirlActober]

I want to do options and in inside the options do another option, how can I do it??

[@happytofu5]

@@GirlActober I found the video "The Only CSS Layout Guide You'll Ever Need " by EdRoh very helpful on how to do layouts

[@GirlActober]

@ اين يمكنني ان اجده ؟

[@GirlActober]

@ where can I find this?

[@happytofu5]

@@GirlActober its here on youtube, I can't link it though because youtube deletes comments with links, just search for the title

[@mr.shredder5430]

just the thing i needed thanks for sharing this content👍

[@yehohanan7738]

Thanks for this tutorial ❤❤❤

[@CapDrew]

Great explanation. You made that look easy, I just have to make a couple of these to get it down so I don't forget.

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

[@amandapanda3750]

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

[@asalmda7010]

BRO YOU'RE AMAZING, HELPING ME SO MUCHHHH, THANK YOUUUU

[@bamanbamni]

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

[@ShaddieMello]

Bro code is elusively elegant as ever

[@biggstreams]

great video!

[@SmartKhani786]

wow great work you've done❤ i subscribed your channel.

[@amitcoc7840]

Best teacher 🧑‍🏫

[@ØgbDêcênt]

Thanks man you're our a real bro 💪

[@asterinology]

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

[@abdullahbiswas1]

Thank you for the content

[@Procode-w2r]

you should be my coding teacher keep it up

[@3210egh]

It helped me a lot. Thank you very much. Let's take a follow-up lecture. Lee Jong-hoon from the coast

[@OceanFanatic]

Helpful video. Thank you

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

[@Pankajweb996]

Exactly same problem i was facing😂

[@Thegoal2.P]

@@Pankajweb996 just use img

[@dmojela1625]

Best teacher.... 👌

[@PriggarGaming]

I wish i found 2 years ago... I made a website for school I literally just used h1 and out hyperlinks in it... Because i didn't knew anything at all... Well... Atleast its helping me now that I am in college and now have to study the same as i did last time Because i don't know University make that syllabus that way... And now i am finally learning something i took lazy way out in class 10

[@gian-mm9kr]

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

[@Blu3ligh7]

100/10 great video!

[@louismario66]

Question...what if you want the home to be at the right by the extreme end and the contact at the left extreme end while the product and about at the middle How will you do it?

[@MdHossainAhmed-sc4ui]

Very helpful video

[@HafeezKhan-it3bl]

Bro your crazy man I like you thanks for help ❤️❤️

[@Thals_MK]

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

[@Tempest28000]

Hi! Senior high school student here! You dropped this king 👑 🗿

[@iangabriel1031]

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

[@domlosurdo3432]

Tough. I was not aware of the nav element and also did not do a ul. I did it the hard (and stupid, apparently) way of setting up individual buttons to create a horizontal navbar. It looks and functions the same but is a lot of extra code. Good news is I learned a lot from it :)

[@VijaykumarA-o8v]

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

[@JanviMali155]

Amazing work

[@mohaimenpotawan2842]

very kind blogger

[@princeshukraan3099]

Very good,I love him

[@hertechera]

Appreciate this, thank you

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

[@devd3]

it prevents horizontal scrolling

[@memefromtheinternet]

@@devd3 thanks I also needed that

[@pholcastaneda3699]

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

[@cuteminired6550]

Yes exactly ​@@pholcastaneda3699

[@sanjayagnihotrii5126]

amazing brooo thumbs up for bro code share

[@muhammadsulaiman4153]

Thank you sir ❤

[@arunimarajesh6144]

Why did float:left and overflow: hidden make the nav bar horizontal? 4:05

[@sandy_mind]

I also have the same doubt someone clear it

[@joseluisMartin]

I've got a question, how did you add style.css to the new tab? Thank you.

[@NeerajKumar-j8y7b]

The navigation and CSS styling in not working on a chrome book. What could be the reason?

[@yashaswimohod9647]

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

[@NnFace-ql3jo]

best coder

[@chigozie6333]

Thank you Bro Code. I practised this tutorial and observed that when i floated the navigation bars RIGHT the navigation bars were not arranged in sequence as described in the script. I had no problem when i floated LEFT. How can i correct this?

[@paIeville]

maybe instead of using the float and overflow properties like he did, try using display:inline on the li elements and using text-align:right on the ul. but i cant test rn so dont know if it works edit: worked for me

[@GirlActober]

I want to do options and in inside the options do another option, how can I do it??

[@AdeelAhmad0007]

Nice Video

[@nickpage1575]

thank you for this! i am battling constructing a website for my web development course and i am struggling pretty badly. Now i need to fight ad figure out how to create the other sections of my site and link them to the main page...Any tips?

[@kiddReyes]

If I want to float right why does my words reverse

[@suyashman7964]

Epic bro

[@Games-games506]

you are legend - thanks

[@Angle_gamer980]

Which text editor you have installed?

[@AdeelAhmad0007]

amazing

[@hitoshiasakura9109]

Bro explained it way more precise

[@NaftaliKipkoech]

Bro had to earn my subscription and he did it

[@jokosinh]

Interesting

[@SpongeknobSquarenut]

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

[@ayeshasiddika1252]

great

[@arthurlabrador916]

Thank you

[@ayushlimbu8044]

Thanks bro!

[@AmmarAlBalawi-o1b]

how i turn it in button and make it work ?

[@asifirtezaratul3893]

Bro can you explain the "overflow: hidden" part? How did that fix the problem there?

[@karol3209]

So it doesn't show a scroll bar on the nav bar.

[@agonluta9672]

When you use float: left; on the elements, the parent no longer recognizes the height of its floated children, because floats are taken out of the document flow. As a result, the collapses, and the background color of the disappears, making it look white (or transparent). When you add overflow: hidden; to the .ul1, it forces the parent to recognize the height of its floated children again. This works as a kind of hack to "clear" the floats without needing to manually add a clearfix. Here's why it works: overflow: hidden; makes the container expand to enclose its floated children, solving the collapsing issue without needing to apply the more explicit clearfix methods. Why the overflow: hidden; works: Without it: Floated elements are removed from the normal flow of the document. The container doesn't stretch to wrap around its floated children, causing it to "collapse" in terms of height. With it: The overflow: hidden; forces the container to calculate its dimensions based on the floated elements inside it, so it correctly stretches to enclose its content.

[@watsonhaymont]

thumbs .. nailed it ! lol

[@mrvivekofficial.0]

Nice bro

[@bonnimahitani4998]

yo what website editor u using

[@johnvincentbaguion8338]

When we are outting "padding" its turning red, not blue

[@Yeager_001]

Bro code ❌ Pro code ✅🤩🥵

[@nathansimelane562]

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

[@hamzeizmail442]

sir its not showing copy option in html

[@AdeelAhmad0007]

good

[@brightasinde7034]

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

[@Chilli_Tea]

extra challenge: style nav with flexbox

[@nazmoonnahar9996]

Bro really cooked

[@KaranSingh-zz9rg]

thanks sir

[@withinsyn7482]

Thank you!!!!!!

[@kingsleydied]

does anyone elses nav bar stop working when they put it in a ordered list? I don't know how to get it to work

[@ethioictmedia]

it is Good

[@oussamaidrissi9536]

Thanks you

[@Compilationguy1727]

The second a copy the html page the codes stoped working

[@why_milinnd_01]

Why dont you just use display flex ??

[@semiloreolowe2962]

Please what extension do you use

[@lutfirighthere]

Do you mean coding software? He uses visual Studio

[@chamnabkem5459]

Thank you!!!

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

[@EnderKyo]

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

[@boss-ut6yw]

question what is padding what is margin ?

[@Irin_yigir]

padding: is the space between the block content and it's border; Margin: is the space between the block itself and the borders of the page;

[@boss-ut6yw]

@@Irin_yigir thanks

[@RickWoellert]

Yeah Bro I really learn so much from your Videos. I have another Version instead of the float: left you can change the display to inline-block for the (a) and (li): And i also change the margin and padding so the ul is in the center( no is not in the center when i change the size of the screen where the index.html is opened. How to center the horizontal navigation bar? Maybe with flexbox but the topic comes later. style.css /* No Margin for the Navigation Bar */ body { margin: 0px; } /* The content after the Nav Bar should have a margin */ main { margin-left: 20px; margin-right: 20px; } /* Header of the Website */ h1 { text-align: center; } /* The ul content inside the navbar */ .navbar ul { list-style-type: none; /* Remove the bullet Points in front */ background-color: hsl(0, 0%, 25%); padding: 0px; /* Size inside the ul bar. */ padding-left: 70px; /* to center */ margin: 0px; overflow: hidden; /* Keeps content in the navbar ul */ } .navbar a { color: white; text-decoration: none; /* remove the underline */ padding: 15px; /* Space between each a Element */ display: inline-block; /* Changed from block to inline-block */ text-align: center; } .navbar a:hover { background-color: hsl(0, 0%, 10%); } .navbar li { display: inline-block; /* Changed from float to inline-block */ }

[@Pavan-gq3ld]

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

[@lutfirighthere]

what is your code