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

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

[@1stlyrics-s9c]

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

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

[@Dr.Amirdharajah]

Crystal Clear Explanation… ❤🎉

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

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

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

[@mr.shredder5430]

just the thing i needed thanks for sharing this content👍

[@user-dk9of1ok1n]

You are the best Bro. Stay blessed 🙌

[@InterestingLake]

Awesome tutorial, thanks!

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

[@ShaddieMello]

Bro code is elusively elegant as ever

[@amandapanda3750]

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

[@bamanbamni]

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

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

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

[@yehohanan7738]

Thanks for this tutorial ❤❤❤

[@asalmda7010]

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

[@asterinology]

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

[@3210egh]

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

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

[@SmartKhani786]

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

[@amitcoc7840]

Best teacher 🧑‍🏫

[@Tempest28000]

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

[@Procode-w2r]

you should be my coding teacher keep it up

[@Asulescu]

May god bless you ! Thank you save my life seriously

[@ØgbDêcênt]

Thanks man you're our a real bro 💪

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

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

[@HafeezKhan-it3bl]

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

[@gian-mm9kr]

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

[@dmojela1625]

Best teacher.... 👌

[@abdullahbiswas1]

Thank you for the content

[@MdHossainAhmed-sc4ui]

Very helpful video

[@biggstreams]

great video!

[@mohaimenpotawan2842]

very kind blogger

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

[@Thals_MK]

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

[@OceanFanatic]

Helpful video. Thank you

[@iangabriel1031]

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

[@princeshukraan3099]

Very good,I love him

[@JanviMali155]

Amazing work

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

[@NnFace-ql3jo]

best coder

[@Blu3ligh7]

100/10 great video!

[@sanjayagnihotrii5126]

amazing brooo thumbs up for bro code share

[@muhammadsulaiman4153]

Thank you sir ❤

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

[@joseluisMartin]

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

[@yashaswimohod9647]

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

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

[@NeerajKumar-j8y7b]

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

[@kiddReyes]

If I want to float right why does my words reverse

[@gamiltadross2807]

Just wow

[@NaftaliKipkoech]

Bro had to earn my subscription and he did it

[@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 */ }

[@GirlActober]

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

[@suyashman7964]

Epic bro

[@AdeelAhmad0007]

Nice Video

[@mrkaliyaofficial]

Nice bro

[@Teymur.17.footballl]

Bro can someone tell me why my code is not working for example I click the about button but the text is the same even though I changed it

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

[@AdeelAhmad0007]

amazing

[@Angle_gamer980]

Which text editor you have installed?

[@arthurlabrador916]

Thank you

[@AmmarAlBalawi-o1b]

how i turn it in button and make it work ?

[@hitoshiasakura9109]

Bro explained it way more precise

[@SpongeknobSquarenut]

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

[@ayushlimbu8044]

Thanks bro!

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

[@Games-games506]

you are legend - thanks

[@nathansimelane562]

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

[@ayeshasiddika1252]

great

[@brightasinde7034]

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

[@watsonhaymont]

thumbs .. nailed it ! lol

[@ethioictmedia]

it is Good

[@jokosinh]

Interesting

[@hamzeizmail442]

sir its not showing copy option in html

[@johnvincentbaguion8338]

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

[@withinsyn7482]

Thank you!!!!!!

[@bonnimahitani4998]

yo what website editor u using

[@KaranSingh-zz9rg]

thanks sir

[@why_milinnd_01]

Why dont you just use display flex ??

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

[@oussamaidrissi9536]

Thanks you

[@chamnabkem5459]

Thank you!!!

[@Yeager_001]

Bro code ❌ Pro code ✅🤩🥵

[@Compilationguy1727]

The second a copy the html page the codes stoped working

[@semiloreolowe2962]

Please what extension do you use

[@lutfirighthere]

Do you mean coding software? He uses visual Studio

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

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

[@Chilli_Tea]

extra challenge: style nav with flexbox