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

Рет қаралды 202,560

8 ай бұрын

#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

Пікірлер: 99

@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 7 ай бұрын

How to I copy the code

@rayyanabdulwajid7681 4 ай бұрын

It's better to use display flex than float.

@MAALIK-ULMULK 2 ай бұрын

i like it

@walidwalid1669 Ай бұрын

Thank you 🎉

@devd3 8 ай бұрын

bro cooked and I ate

@Fl_ninja 7 ай бұрын

💯 Every vid

@Enryu071 4 ай бұрын

Yum

@Chahatkajalwa Ай бұрын

I Also Eat but I learn the recipe as well

@evanauli8092 Ай бұрын

ZANKS ZQADDDYIE

@rizwinrz8468 29 күн бұрын

😂😂

@StopWhining491 8 ай бұрын

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

@Legomaniac359 3 ай бұрын

Straight to the point. Thank you!

@supreme_wx2499 18 күн бұрын

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

@amandapanda3750 3 ай бұрын

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

@deborahtshiyeya307 19 күн бұрын

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

@richardolajiga3176 6 ай бұрын

This guy is too good with his explanations

@l-fitness3590 4 ай бұрын

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

@mr.shredder5430 4 ай бұрын

just the thing i needed thanks for sharing this content👍

@hyzlskyy Ай бұрын

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

@maricarlacerna5841 5 ай бұрын

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

@jakry_apexlegends 5 ай бұрын

You are a gentleman and a scholar. Thanks

@Freeteechingresiurce87409 5 ай бұрын

Very good person

@dmojela1625 4 ай бұрын

Best teacher.... 👌

@ayannasir6653 8 ай бұрын

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

@JanviMali155 25 күн бұрын

Amazing work

@nicodiangelotheghostking2 6 ай бұрын

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

@amitcoc7840 3 ай бұрын

Best teacher 🧑‍🏫

@Asulescu 2 ай бұрын

May god bless you ! Thank you save my life seriously

@hertechera 3 ай бұрын

Appreciate this, thank you

@abdullahbiswas1 6 ай бұрын

Thank you for the content

@MdHossainAhmed-sc4ui 4 ай бұрын

Very helpful video

@iangabriel1031 6 ай бұрын

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

@shanepelletier2347 2 ай бұрын

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!

@AdeelAhmad0007 Күн бұрын

amazing

@princeshukraan3099 2 ай бұрын

Very good,I love him

@bamanbamni 5 ай бұрын

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

@Roblox_oyuncu97info 7 ай бұрын

you are legend - thanks

@waltermitty4132 2 ай бұрын

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

@suyashman7964 8 ай бұрын

Epic bro

@mohaimenpotawan2842 2 ай бұрын

very kind blogger

@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

@chamnabkem5459 5 ай бұрын

Thank you!!!

@AdeelAhmad0007 2 күн бұрын

Nice Video

@NnFace-ql3jo 5 ай бұрын

best coder

@ayushlimbu8044 4 ай бұрын

Thanks bro!

@ayeshasiddika1252 3 ай бұрын

great

@Vivek_top_09 27 күн бұрын

Nice bro

@NaftaliKipkoech 5 ай бұрын

Bro had to earn my subscription and he did it

@SpongeknobSquarenut 4 ай бұрын

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

@AdeelAhmad0007 Күн бұрын

good

@ethioictmedia 4 ай бұрын

it is Good

@nathansimelane562 3 ай бұрын

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

@user-cu9pd2kv2q 4 ай бұрын

Thx bro

@brightasinde7034 5 ай бұрын

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

@prithurajvidyadas2850 10 ай бұрын

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

@omairtech6711 8 ай бұрын

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

@devd3 8 ай бұрын

it prevents horizontal scrolling

@memefromtheinternet 8 ай бұрын

@@devd3 thanks I also needed that

@pholcastaneda3699 6 ай бұрын

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

@cuteminired6550 2 ай бұрын

Yes exactly @@pholcastaneda3699

@yashaswimohod9647 3 ай бұрын

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

@ludwajzsk2758 8 ай бұрын

👍

@nazmoonnahar9996 Ай бұрын

Bro really cooked

@kyonsmith9859 7 ай бұрын

@user-lg8ms8pw6z 2 ай бұрын

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 2 ай бұрын

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

@chilli_Tea 28 күн бұрын

extra challenge: style nav with flexbox

@adejaya1692 Ай бұрын

❤

@gian-mm9kr 5 ай бұрын

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

@bqadrat 3 ай бұрын

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 3 ай бұрын

If I want to float right why does my words reverse

@johnryder8464 2 ай бұрын

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

@Pavan-gq3ld 20 күн бұрын

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

@EnderKyo 5 ай бұрын

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 3 ай бұрын

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

@EnderKyo 3 ай бұрын

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

@nabinkhadka6270 11 күн бұрын

Just make a container display flex It's easy

@GiorgiTarielashvili 2 ай бұрын

Sigma

@EnderKyo 5 ай бұрын

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

@ishwardayalgarg8097 3 ай бұрын

Adjust width of ul: 30%or 400 px

@haloholahehe4285 5 ай бұрын

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 5 ай бұрын

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 3 ай бұрын

Aowkaowkoakw pake translate ke bahasa Indonesia aja bang