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

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

bro cooked and I ate

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

Best teacher.... 👌

Epic bro

May god bless you ! Thank you save my life seriously

You are a gentleman and a scholar. Thanks

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?

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

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?

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.

❤

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.

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?

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?

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

1:50

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

Why mine isn't working😭😭

you could of just put margin: 0 20px;