How to Create Navbar in HTML and CSS
HTML-код
- Опубликовано: 11 май 2023
- 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.com/codehalyoutu...
Get Source Code by PayPal
ko-fi.com/s/df5f8f55e5
🔔 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.com/file/d/157sW...
Image Sources:
Image created by freepik
www.freepik.com/free-vector/g...
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.
Thanks for sharing your knowledge! Very helpful and easy to understand.
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.
So simple, so awesome.
Thanks my guy. Helping me land clients as a beginer
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
Great video, great tutorial. Thanks bro
woow, thank you...this was a good practice project
Hello, I have a question: how can I make the strip fly out on the other side?
you are the best continue❤❤
Short Video, AWSOME Job !! Thanks
I am learning a lot from your videos, thanks
Keep going man!
Just love it❤
Nice!!!
very nice 6 min !!!
thanks codehal for this amazing tuotrial
Finally he know He have a channel 😅btw very Gud ❤
😅😅
Awesome 😍
2nd from Bangladesh 💝
Thank you so Much i learn it
thanks man
Good job, thanks
TQ. very helpful
great
nice video thx, btw what's the vs code theme ?
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!)
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.
@@beko1603 Thank you very much for the explanation! :)
Thank You..
🙏
Wow, thank you!!❤
best tutorial ever thanks so mucj
شكرا Thank it was helpful💯💯
Can the logo be moved further to the left? Amazing content❤
వవవవవవనషహ ఒ
య
లవ
ణ
good navbar bro
wouldn't be easier to use a border or outline to the a's?
i thought the same haha
I love it bro😍😍
Love from India ❤sir please work hole this in mobile please because import URL didn't show in mobile app reaplit
hocam selamlar aynı sayfa içinde iki farklı yapı oluşturdum body etiketlerindeki çakışmayı nasıl önlerim (important ?)
thank you
ada course nya ga bang
THANKSS, this video is very nice
wow simply wow
Nice tutorial
Nice worj🎉❤❤❤
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
He used display:flex and justify-content: space-between
Did you ensure that the logo and the nav bar are separate from each other?
@@hafidz2698 How can they be separated?
thanx broo
thank you so much bro
thanks a lot bro
what to put instead of Logo to show my own logo ??
i think you just put your image by using
From where do you get background images? i like to customize your code's and i want to implement new background images 🥰🥰
just search 4k "eg:city" desktop wallpaper
Just subscribed
Which theme are u using
Very nice
the background image is not showing
You have to put the image and project in the same file
@@Ana_.H like how mine not showing too.
They are in the same file
@@Jay_brahim Maybe your invoking it the wrong way.
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?
I found the mistake. in the css I forgot the "*" in the first row. now it works.
i did the same code but i cant get that little white line
Which website are you use for pictures?
he is usding freepik
bro responsive kasa banana ka woh bhi batate
this shit goes hard asf
I'm from Egypt ❤
Me too
@@muhammedshaltoot9665 منين من مصر
@@omarwalied-yr8yx من المنوفية
@@muhammedshaltoot9665 احسن ناس
انت اتعلمت برمجه من مين ؟
Theme name?
Hi there. Instead of words, how can we replace with a diagram? Like a "home logo" to make it nice looking
First❤
Hi, thanks ❤
Can anyone please tell me what theme he is using ?
For some reason when I use "space-between", it puts the elements at opposite ends of the page width.
You might've forgotten to add 'box-sizing: border-box;' property to the * tag. At least, it was the reason in my case.
@@zlbkaa thanks for this! As soon as I’m at the computer I’ll double check and see if that fixes it!
Bro make best logo in 6m than me on my 2 hours
hey its all working but theres one problem i dont see the content i implemented into the page
where do you get th image
how do you add text below?
tnx
swag swag swag poggers pogg i love swag i love poggers
When I do the background thing it's it showing up I have it exactly like you have it, help?
my navagation bar text is aligned to the left
Maybe too much margin
How can I fix this when I use on mobile device? It doesn’t look right when i use a mobile device
Ich liebe dich
haha bro nice joke with the only
why in navbar a margin-left written why padding-left was not written
Why padding?
Sir what is the content? content: " "; ?
Responsive değil
Its not responsive
Did u add a link in the # place?
music = instant dislike
you are the best continue❤❤