How to Create Navbar in HTML and CSS

Рет қаралды 230,410

Күн бұрын

How to Create Navbar in HTML and CSS, How to Make Navbar in HTML and CSS, How to Create Navigation Bar in HTML and CSS, How to Make Navigation Bar in HTML and CSS, Simple Navbar HTML CSS
Click For More: / @codehal
Website:
codehalweb.com/
-------------------------------------------------------------------
Get Source Code from here and support me ❤
buymeacoffee.c...
Get Source Code by PayPal
ko-fi.com/s/df...
🔔 Subscribe Now!
/ @codehal
Related Videos:
Responsive Navbar HTML CSS | Responsive Animated Navigation Bar
• Responsive Navbar HTML...
Animated Navigation Bar in HTML and CSS | Menu Hover Animation Effects
• Animated Navigation Ba...
Animated Navigation Menu Bar using HTML CSS | Animated Tabs with Indicator
• Animated Navigation Me...
How to Create an Active Nav Link on Scroll using HTML CSS and Javascript | Active Menu Class
• How to Create an Activ...
Download Image & Start Project From Scratch:
drive.google.c...
Image Sources:
Image created by freepik
www.freepik.co...
Codehal
-------------------------------------------------------------------
#css #cssanimation #csseffect #codehal
-------------------------------------------------------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

Пікірлер: 123

@lynn5804 4 ай бұрын

At first, it didn't work for me and then I realized I had missed some of the steps lol. It actually works, making my assignment nice. Good video

@sweetybaghwar2367 9 сағат бұрын

It was really good. Simple and clean. Thank you.

@cristianrioja9844 Күн бұрын

Gooooood

@carlosdejesus7109 Жыл бұрын

Thanks for sharing your knowledge! Very helpful and easy to understand.

@giorgimtsituri7826 Жыл бұрын

I am learning a lot from your videos, thanks

@codehal Жыл бұрын

Keep going man!

@ganeshgupta9692 Жыл бұрын

Finally he know He have a channel 😅btw very Gud ❤

@codehal Жыл бұрын

😅😅

@ogunikitty 8 ай бұрын

Thanks my guy. Helping me land clients as a beginer

@Sahil_Hansda_official 2 күн бұрын

Good job

@guchfun 6 ай бұрын

Thank you for sharing this tutorial! It's nice looking and pretty straightforward. I was going to use Bootstrap but I may just code it myself with a little extra JS thrown in for small animation touches. Next need to find a way to link a navbar file to the homepage so I can make changes in just one place.

@wahyuramadhanaz-zuhri1673 23 күн бұрын

Thanks, you got an instant like and subscribe for the straighforwars content!

@krzysiekkrzysiek9059 Жыл бұрын

So simple, so awesome.

@berkoo5497 5 ай бұрын

Short Video, AWSOME Job !! Thanks

@abhinavsreekumar4703 Жыл бұрын

Can the logo be moved further to the left? Amazing content❤

@UrjanaJanardhan 11 ай бұрын

వవవవవవనషహ ఒ

@UrjanaJanardhan 11 ай бұрын

య

@UrjanaJanardhan 11 ай бұрын

లవ

@UrjanaJanardhan 11 ай бұрын

ణ

@ClimbToZenith 5 ай бұрын

you are the best continue❤❤

@IceCrownOne 5 ай бұрын

i did the same code but i cant get that little white line

@tommypool-xd5np 5 ай бұрын

Can I ask about the first input on the .css stylesheet. I see a lot of people that start with * { and set the margin, padding to 0 and box sizing to border box. Why is this? Is there anywhere that explains this? (I am very new to this!)

@beko1603 4 ай бұрын

The * selector targets all elements on the page. Setting margin and padding to 0 and box-sizing to border-box ensures consistent spacing and sizing, making styling more predictable across different browsers. It's a common practice for CSS resets or normalizations to establish a baseline for styling.

@tommypool-xd5np 4 ай бұрын

@@beko1603 Thank you very much for the explanation! :)

@cetlan404 11 ай бұрын

Great video, great tutorial. Thanks bro

@relaxsoundT68 3 ай бұрын

I love it bro😍😍

@DamienLavizzo 4 ай бұрын

For some reason when I use "space-between", it puts the elements at opposite ends of the page width.

@aV5d9nlUBQ9 3 ай бұрын

You might've forgotten to add 'box-sizing: border-box;' property to the * tag. At least, it was the reason in my case.

@DamienLavizzo 3 ай бұрын

@@aV5d9nlUBQ9 thanks for this! As soon as I’m at the computer I’ll double check and see if that fixes it!

@muhdkhairulamirinum3985 3 ай бұрын

TQ. very helpful

@ahmedghallab5342 6 ай бұрын

شكرا Thank it was helpful💯💯

@rrkredits 3 ай бұрын

Super

@aishaShwehna 9 ай бұрын

Thank You.. 🙏

@nayeemhossain770 Жыл бұрын

Awesome 😍 2nd from Bangladesh 💝

@techobi2137 6 ай бұрын

THANKSS, this video is very nice

@Victusu 2 ай бұрын

which vs code theme is that

@user-vh8fq6vj6z 7 ай бұрын

Thank you so Much i learn it

@1millionlabs 8 ай бұрын

thanks codehal for this amazing tuotrial

@TheRocketFlyerMAX 8 ай бұрын

best tutorial ever thanks so mucj

@sergiumihaitodireanu2901 5 ай бұрын

Wow, thank you!!❤

@charlestoneoyoo 11 ай бұрын

woow, thank you...this was a good practice project

@danielthang1075 Жыл бұрын

Just love it❤

@frankg2579 27 күн бұрын

what does the * in the stylesheet refer to?

@montalesmarktitusr.4930 Жыл бұрын

the background image is not showing

@Ana_.H 8 ай бұрын

You have to put the image and project in the same file

@thasmilingcoast 4 ай бұрын

@@Ana_.H like how mine not showing too. They are in the same file

@Melissa0V 3 ай бұрын

@@thasmilingcoast Maybe your invoking it the wrong way.

@artwork-studios Ай бұрын

@@Melissa0Vcould be or could be no browser support

@DecodeReels Жыл бұрын

Love from India ❤sir please work hole this in mobile please because import URL didn't show in mobile app reaplit

@Auynim Ай бұрын

hey so the visual code wont let me type "transition: .3s;" on the line 54 in stylecss edit: i try on ".navbar a:hover::before" and it worked

@zelalemkebede-gg4ui 7 ай бұрын

Nice worj🎉❤❤❤

@FanMade522 11 ай бұрын

Nice!!!

@TyroneEntertainingJoseph 8 ай бұрын

Just subscribed

@elunico10 Жыл бұрын

good navbar bro wouldn't be easier to use a border or outline to the a's?

@Deepak-lx7zb 7 ай бұрын

i thought the same haha

@user-dn4um5kk5z 5 ай бұрын

thanks a lot bro

@dakwahvibes 3 ай бұрын

thanx broo

@henoksebsibe5846 8 ай бұрын

wow simply wow

@raedbouguerra1553 7 ай бұрын

nice video thx, btw what's the vs code theme ?

@kaan9147 6 ай бұрын

hocam selamlar aynı sayfa içinde iki farklı yapı oluşturdum body etiketlerindeki çakışmayı nasıl önlerim (important ?)

@atikadewi1118 Жыл бұрын

Good job, thanks

@Nanashi-rq7lk 9 ай бұрын

Nice tutorial

@AbdallahMaikano-np4jy 3 ай бұрын

bro please where do you get those nice background pictures from

@seahmadnailal-darabi8985 8 ай бұрын

Very nice

@omarwalied-yr8yx Жыл бұрын

I'm from Egypt ❤

@muhammedshaltoot9665 Жыл бұрын

Me too

@omarwalied-yr8yx Жыл бұрын

@@muhammedshaltoot9665 منين من مصر

@muhammedshaltoot9665 Жыл бұрын

@@omarwalied-yr8yx من المنوفية

@omarwalied-yr8yx Жыл бұрын

@@muhammedshaltoot9665 احسن ناس انت اتعلمت برمجه من مين ؟

@dkebun7577 7 ай бұрын

Hi there. Instead of words, how can we replace with a diagram? Like a "home logo" to make it nice looking

@achrafbensethom8719 6 ай бұрын

@l.e.221 10 ай бұрын

Fantastic video for me as a beginer. I followed your instructions an copied all the same way. Instead of your 5 links I made 12. In this case my links can't be seen all. There ist a lot of space between Logo and first links, but the last 2 links are outside the page. How can I solve the problem?

@l.e.221 10 ай бұрын

I found the mistake. in the css I forgot the "*" in the first row. now it works.

@Blayke Жыл бұрын

At 2:35, what part of the css file moves the items to the top right of the screen? I copied what you did but it stayed in the top left

@hafidz2698 Жыл бұрын

He used display:flex and justify-content: space-between Did you ensure that the logo and the nav bar are separate from each other?

@arutoki9810 3 ай бұрын

@@hafidz2698 How can they be separated?

@jpedrothejo 2 ай бұрын

(makes window smaller) "wait where are the other options"

@JoséAugustoR.Santos Ай бұрын

can someone please explain to me what this part means exactly? .navbar a::before

@adfsddsadsadq3323 11 ай бұрын

Hello, I have a question: how can I make the strip fly out on the other side?

@adrianonocanada 11 ай бұрын

very nice 6 min !!!

@eagle4226 11 ай бұрын

thanks man

@carolinabenitez2121 4 ай бұрын

How can I fix this when I use on mobile device? It doesn’t look right when i use a mobile device

@qasimsk09 9 ай бұрын

Which theme are u using

@user-xl5rx8ro1s Жыл бұрын

thank you

@tandung03 Жыл бұрын

First❤

@codehal Жыл бұрын

Hi, thanks ❤

@shaddamsayyid 25 күн бұрын

can u make it with explaination??

@NoBummer 4 ай бұрын

swag swag swag poggers pogg i love swag i love poggers

@kubalu4835 7 ай бұрын

hey its all working but theres one problem i dont see the content i implemented into the page

@Snap-Tutorials Жыл бұрын

great

@acidxop8411 Ай бұрын

can someone tell me why did he use z -index and why is the result same even after using it?

@srt312 Ай бұрын

It is used to blend the background image with the navbar...thats why you can spot the image at the back of the text in the navbar

@KOSRedacted 8 ай бұрын

When I do the background thing it's it showing up I have it exactly like you have it, help?

@CodeCrafte_r Жыл бұрын

Which website are you use for pictures?

@proCodeOfficial Жыл бұрын

he is usding freepik

@ohwen 8 ай бұрын

this shit goes hard asf

@gamerjohnbot 10 ай бұрын

my navagation bar text is aligned to the left

@rireadeoti2615 9 ай бұрын

Maybe too much margin

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

how do you add text below?

@xafuu7286 Жыл бұрын

ada course nya ga bang

@malekalbawaih 11 ай бұрын

what to put instead of Logo to show my own logo ??

@AstaZephyr 4 ай бұрын

i think you just put your image by using

@Vortex03 Күн бұрын

hi! did you figure out how to do it? i'm having the same problem

@CartVista-kb4mw 6 ай бұрын

where do you get th image

@ClimbToZenith 5 ай бұрын

tnx

@rosmelliam2510 10 ай бұрын

Can anyone please tell me what theme he is using ?

@ayush1344 Жыл бұрын

bro responsive kasa banana ka woh bhi batate

@hilbrambaihaki6851 11 ай бұрын

Bro make best logo in 6m than me on my 2 hours

@efuz_master 6 ай бұрын

why in navbar a margin-left written why padding-left was not written

@TLOZ1986 5 ай бұрын

Why padding?

@Adidinamite 5 ай бұрын

haha bro nice joke with the only

@BloxTxsuu Ай бұрын

lil nega wdym

@Osama-Abdelsalam 11 ай бұрын

Theme name?

@GovaObito 7 ай бұрын

Ich liebe dich

@curon_licentia 4 ай бұрын

@leonciojrcoronado2733 7 ай бұрын

Sir what is the content? content: " "; ?

@TLOZ1986 5 ай бұрын

Responsive değil

@TLOZ1986 5 ай бұрын

Its not responsive

@projackson355 5 ай бұрын

Did u add a link in the # place?

@Abdelillah-27 Жыл бұрын

thank you so much bro

@luther-pd5uy 10 ай бұрын

music = instant dislike

@tahalamkahkah-ok9ry Жыл бұрын

you are the best continue❤❤