HomeОбразованиеRelated VideosMore From: Kevin Powell

How to create an awesome navigation bar with HTML & CSS

4038 ratings | 304084 views
A tutorial that takes a look at how to create a nice looking nav bar with a cool little hover effect for the nav items, using HTML and CSS. This was the very first video I ever put up on YouTube, and while it's aged well, I've made an updated version that is responsive: https://youtu.be/8QKOaTYvYUA I've put this on Codepen: http://codepen.io/kevinpowell/pen/GrLKNo I start this video off with a quick look at how to actually write the HTML for a navigation bar, follow it up with the simple styling of the navigation with CSS and then wrap it all up with how to add the hover effect in there using some fun little hover tricks. If you want a bit more reading on pseudo elements, this should help: https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Html code for embedding videos on your blog
Text Comments (872)
Ben u f o (2 years ago)
Learning to code, this is amazing thanks man! all working first time.. thanks for taking the time to do it!
Kevin Powell (1 year ago)
Wish I could say, but I started back in the late 90s, and it was just a hobby back then, and was for a looong time.
s-925 d-925 (1 year ago)
how good are you at code 8 months in?
Kevin Powell (1 year ago)
If you go to my GitHub page - www.github.com/kevin-powell - I have a few full projects up there from things I've built on my channel, you can download the full projects from there and look at the code :).
FreshLv (1 year ago)
Kevin Powell maybe you can send me some websites?
Dennis Adams (10 days ago)
way too fast for me.
Kevin Powell (5 days ago)
Sorry! I'm sort of assuming people are pausing and coding along with it, but it was also my very first video, hopefully you find my newer ones a little easier to follow along with.
Joey Huntington (12 days ago)
how does your file auto update in your browser? I typically have to save the file then refresh the browser. this would make my life much easier, thanks.
Kevin Powell (5 days ago)
Most editors have an extension (Live Server for VS Code, for example). I also show a few different ways here: https://youtu.be/h24noHYsuGc
Desmond Miles (13 days ago)
How to make that hovering animation emerge from the middle and expand sideways(from the center of above each of the list items), I hope you got my question.
adesina rotimi (14 days ago)
How do I make this responsive
Anish (18 days ago)
and i was using table rows for navbar.......lol
Saalim Majoo (19 days ago)
Hello, if anyone could help me. My pseudo is not working for some reason, the ::after or ::before i think are not registering and I am not sure what to do.
Waskoop (20 days ago)
Super Himanshu (22 days ago)
how to make a fixed navbar like that
Kate Ahrens (28 days ago)
I love seeing this in action as you go. That helps me understand soooo much. I have this crazy thing happening in my nav when I float right the text goes halfway under the next nav/div. I can't figure out why!
Kevin Powell (25 days ago)
hard to know without seeing it :\
Ben Flynn (28 days ago)
Can make the highlight spread out from the center by adding {.. left: 0; right: 0; ..} to the nav a::before pseudo-element's CSS.
vin r (1 month ago)
great job, thanks for sharing. thank you!
Roumen1 (1 month ago)
Thank you so much!
K W (1 month ago)
Great video! Thank you for sharing. I am new to HTML and CSS, and this is really helpful. Quick question: can you please recommend a good text editor? I am currently using Brackets. I have heard Sublime Text is good. Thoughts? Thanks!
K W (1 month ago)
@Kevin Powell Thank you for the information! Really appreciate it.
Kevin Powell (1 month ago)
Brackets is probably the most user friendly for beginners. I currently use VS Code, and used to use Atom, they are both great :)
Anastasiia Lazorenko (1 month ago)
Hi. Very nice and helpful video! Could you also tell how to make nav strictly vertically centered, please?
Kevin Powell (1 month ago)
This video might help! https://www.youtube.com/watch?v=qJVVZYTYA9U
Youssuf Mostafa (1 month ago)
my header doesnt touch the side !!
Kevin Powell (1 month ago)
on the body, add "margin: 0;"
Lukas Johnson (1 month ago)
Awesome tut. Got this working in 2019!! One question tho how could i make it so the page i am on holds the bar on top of text. Would be cool thanks
Kevin Powell (1 month ago)
you'd want to add a "position: fixed" and "width: 100%; top: 0;"
bb 823 (1 month ago)
WOW! The detail in explanation, it's just perfect.
ty no nie wiem (1 month ago)
Thank you <3
Feixas (1 month ago)
Hey Kevin, can you please answer a question I left in your Responsive Navigation Bar Video Please ?
Feixas (1 month ago)
@Kevin Powell Oh, sorry. I thought I had commented on your most recent video, but I commented on this one by mistake. I thought you didn't read older video's comments. But thank you so much.
Kevin Powell (1 month ago)
Asking on multiple videos won't get me to answer any faster in the future Feixas, I go from oldest to newest and work my way through once or twice a week :)
how to download his logo?
@Kevin Powell kk
Kevin Powell (1 month ago)
I lost the files for this one a long time ago, sorry :(
Alex Vidal (1 month ago)
Hi Kevin, I tried following your steps but my image/logo is not the same size as yours but actually 80% of the page. I ended up copying your codes exact and still same problem. Do you have an idea as why this could be happening? I have the <img> inside the <div> which is inside the <header>, I have a different class name for the div and the logo. I can simply fix it by adjusting the size of the image with its class name in css (ex. logoname{ width: 50px;}) and that works but I'm confused as to why you have the div/container at 80% and it works fine?
Alex Vidal (1 month ago)
@Kevin Powell Thank you for the reply!!
Kevin Powell (1 month ago)
My logo was that size naturally :) Images will stay their actual size unless we tell them to be smaller, and what you put for your solution is perfect!
WENSONG LIU (1 month ago)
Thanks, Kevin. I'm building my personal website and this video helps a lot!
Rich Johnny (1 month ago)
hey bro this is a great video! I was just wondering if I wanted the hover effect to happen at the bottom of the text what would I need to change in the code?
Rich Johnny (1 month ago)
@Kevin Powell Yes it worked. Thank you so much
Kevin Powell (1 month ago)
Where I had top:, use bottom: instead
Kraken Clips (1 month ago)
Hey , sorry for bothering you , The mouse only hovers on the animation and not on the test for me could you help me ?
Kevin Powell (1 month ago)
Sounds like the :hover isn't on the link itself? Don't put the :hover on the pseudo-element, make sure it's on the link. Also, maybe try adding padding to the link?
maru maru (1 month ago)
To anyone who experienced whitespace issues when applying the css, adding a universal reset selector will solve this issue: * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } I found this via stack overflow.
Kevin Powell (1 month ago)
Oh no! Never use outline: 0;, it's pretty important to keep (unless you are going to be adding one back in everywhere that should have one). That looks like a pretty heavy handed reset IMO. I understand the margin and padding thing, but even that means on lists you'll have to add them back in or the bullet/icon will be in the wrong place and could cause some overlapping items.
fast foward in 2019 and im still using this today
jay ishak (1 month ago)
how to make the transitions start from middle instead of left?
Kevin Powell (1 month ago)
you'll want to set the "left" and "right" to 50%, then have them go to 0 on hover.
Ben Flynn (1 month ago)
Handy video. Surprised header didn't need display: inline-block; for floats to work. Personally I prefer the highlight bar under the link, if possible. And 5px is a bit too thick, more like 2px. I used to achieve the same effect crudely by adding a border on the list-item on hover. These days a lot of sites have a semi-transparent overlay div that is made visible on hovering over navbar links, especially when there's a lot of sub-links emerging from the navbar link. I agree with the wisdom of not over-specifying the CSS item, i.e. having nav a rather than #navbar li a .
Lukas Donnelly (2 months ago)
Three words: I LOVE YOU
Rachel Yin (2 months ago)
Thanks for the video, it really helped me! :-) if I wanted to make the animated line appear under the words, how would I do it?
Kevin Powell (1 month ago)
Haha, I don't want to be president (nor can I be, I'm from the wrong country :P). What Ben said would work perfectly :)
Ben Flynn (1 month ago)
Where Kevin has ::before, you put ::after. Where Kevin put top: 0; in the nav a:hover::before{...} block, you put bottom: 0; in your nav a:hover::after {....} block. I prefer it this way too. BTW - Kevin for President 2020 ? :-)
Jiyun Zhao (2 months ago)
Happy to see you here Kevin. You are the best teacher, wish we will have more class with you sooner.----Jane Zhao
Jiyun Zhao (1 month ago)
Lucas Koh Shoo (2 months ago)
The header color won't change.
Kevin Powell (2 months ago)
Hard to say what the issue might be without seeing more
good timing... I got a wix ad before this video
Kevin Powell (2 months ago)
Yup, they love advertising against my content :)
Toby Porterfield (2 months ago)
Thanks! I'm doing a HTML project at school and listened to the video and completed it step-by-step and I'm thrilled with the result!!!!!!!
Sagar Raut (2 months ago)
Kevin Powell (2 months ago)
hi :D
Luca Poulsen (2 months ago)
Harpreet Kaur (2 months ago)
Plz post this again sreen is blur
Kevin Powell (2 months ago)
Check the quality, it was recorded and posted at 1080, so even if I were to reupload it would be the same. The first 30 seconds might be blurry because YT is buffering, but it should be okay after that.
ZemiakTech (2 months ago)
Hey, just wanted to say great tutorial, really killed it with the navigation effect, just one little thing though, I'm getting this thing where there is a certain point on the bottom right of every button, if hovered over, the line comes across the whole page, just wondering if it's something I've done or its a bug in the code
Darkassembley (2 months ago)
This tutorial is super helpful, I'm making a double Navbar right now. Just a quick question, I'm trying to make one of links a bigger font-size but when I do the Navbar expands and the text isn't centered with the rest of the links, how can I fix this? #NewbQuestion
Darkassembley (2 months ago)
Figured it out. position: relative; bottom: 14px; Fixed everything and it looks nice and neat.
Gert Boers (2 months ago)
Very informative. Thanks!
Tyrion Lannister (2 months ago)
I was trying really hard to make a nice looking navigation bar for my website and I had the float:left, float:right parts right but the clear trick is just what I needed.
RoyalFigo (2 months ago)
hey, I'm currently learning to code and got a question. when doing this the animation only works when hovering over the text is it also possible to make it do that when hovering over de black space under and above the text so it will be like if you hover over a certain square in the menu it will work?
Kevin Powell (2 months ago)
You could play with the padding, but you might have to adjust the position afterward
Lachlan Stewart (2 months ago)
This was great
Jaxon Remkes (2 months ago)
Hey Kevin, I am having issues with the Transition. When I am adding it, it is not working. Any ideas? Thanks.
Kevin Powell (2 months ago)
Really hard to say why without seeing what's going on and the code :\ - if you go to my newer videos, there is a link in the description to join a discord community, might be easier to troubleshoot over there :)
VAJRAPU BHARATH (2 months ago)
Hi Kevin, it's really helpful
MARTIN (3 months ago)
you are a great teacher.
looks really cool, but does anyone know how to make the animation over the text go under the text instead? ive tried the 'border-bottom:' tag but it doesnt work.
Kevin Powell (3 months ago)
Instead of having it set to 'top', change it to 'bottom' :)
정라니 (3 months ago)
hey! this is mobile OKAY?
Kevin Powell (3 months ago)
I recreated this, but mobile friendly, in this video https://youtu.be/8QKOaTYvYUA
jason brock (3 months ago)
the header { background: #55d6aa; } isnt filling the background. my code matches yours. whats happening?
jason brock (3 months ago)
nvm. i didnt have <header> i only had the top<head>
xing liu (3 months ago)
Great tutorial!!! Thank you a lot for your help!
Genius Lights AR (3 months ago)
u have no idea the struggle of following other people using notepad++ these stupid things with no explaining what so ever ! thank you SO MUCH !
Genius Lights AR (3 months ago)
@Cono Man I did
Cono Man (3 months ago)
How did you find a Css tutorial where the guy uses notepad lol
farshad goodarzian (3 months ago)
perfect. thanks for your video.
Jane Swift (3 months ago)
The bkg colour doesn't show, Im also wanting to use LESS?
Kevin Powell (3 months ago)
I don't know why the background color isn't working without seeing more Jane! You can definitely use LESS if you'd like! I don't have much experience with it, personally I use Sass, but Less is awesome as well :D
افشین (3 months ago)
You should better use flex for this approach
Kevin Powell (3 months ago)
I made a newer version of this using flexbox and grid :)
SergioU (3 months ago)
Nice. Thanks! Could someone explain with a little more detail what these lines are doing?: header::after { content: ''; display: table; clear: both; } Cheers
JayFreez (3 months ago)
thats fixing the disappereance of the header, cuz it disappears when logo and nav are floating left and right
Quinten Buijs (3 months ago)
i have another issue my nav green thing is not full size this is the pictures https://www.dropbox.com/s/ni0sf2behygbrtz/issue%20image%202.png?dl=0 https://www.dropbox.com/s/mzfyyw34lthkzru/issue%20image%201.png?dl=0
Quinten Buijs (3 months ago)
it don't work @Kevin Powell
Quinten Buijs (3 months ago)
I gonna try
Quinten Buijs (3 months ago)
thx @Kevin Powell
Kevin Powell (3 months ago)
body { margin: 0; }
NiePa Ha (3 months ago)
thank you for this amazing Vid! It helped me a lot for my website. :)
hamie58 (3 months ago)
Thank you, I have to code a basic website for school and my navigation was messing up the rest of my page, this helped so much.
Kevin Powell (3 months ago)
Glad I could help :D
sigmiami (3 months ago)
Key parts are not well explained
Kevin Powell (3 months ago)
Sorry :(. What wasn't well explained exactly. It was my very first video, so my future content might be a little better (I'd like to think so, at least!!)
Quinten Buijs (3 months ago)
an youhelp me please its doing noting to my website it change noting the styles.css
Quinten Buijs (3 months ago)
@KIRAW BleachI have fixt it it wassend in the map css ;(
KIRAW Bleach (3 months ago)
put this into your <head> </head> on your html: <link rel="stylesheet" type="text/css" media="screen" href="styles.css"> hope that helped out
Marion Libdan (4 months ago)
What kind of application is that?
Marion Libdan (3 months ago)
Ok thanks
Kevin Powell (3 months ago)
Not sure I understand the question? I was writing my code with Atom.
heldi muhammad (4 months ago)
do we memorize all the tag ?
Kevin Powell (4 months ago)
As others have said, don't try to memorize them. HTML & CSS are so repetitive you will remmember them faster than you'd expect.
Caleb Paterson (4 months ago)
Practice. It can take years to memorize all the tags but it will pay off!
Gerald Pilks (4 months ago)
basic ones
Gerald Pilks (4 months ago)
Not real ly you u just need to know the important ones
uGim (4 months ago)
So, can I center those?
Fox Nation (4 months ago)
Thanks so much, I really needed this tutorial :)
Kevin Powell (4 months ago)
Glad it helped you out!
nuwan goonewardena (4 months ago)
Awesome 😎
Alankriti Shrivastava (4 months ago)
which editor are u using???
Kevin Powell (4 months ago)
In this video I was using Atom. I've since switched to VS Code, but both are awesome.
Megan Sanders (4 months ago)
Thanks for sharing, Kevin! The way you teach is very easy to follow and I appreciate your explanations for why you use certain elements. I am in a beginner HTML and CSS class in college, and this has been very helpful to understand the practical application of what I'm learning.
Schwinnng Direct (4 months ago)
The line on top isn't moving..
Bryce Thomas (4 months ago)
Thank you so much! This is so cool!
Yovan Julio Adam (4 months ago)
how do you make that live preview?
Miska (4 months ago)
Great video helped me a lot. Can you show us how to evenly spread out the navbar elements over the bar in a responsive way?
Kevin Powell (4 months ago)
I made a responsive version that would allow just for that in this video :) - https://youtu.be/8QKOaTYvYUA
Mr HotSauce (4 months ago)
how do u out the logo in the very corner
Kevin Powell (4 months ago)
I would have to go outside of the 'container'
Mr HotSauce (4 months ago)
ok i dont know why this happens but when ever im using any editor and i try and link a css file to the html it never works i cant do it can someone help me plz
LIGHT (4 months ago)
@Kevin Powell please reply as fast as possible
LIGHT (4 months ago)
Kevin Powell hi I have the same problem. I copied the codes (in the link) and pasted them again but nothing happened. I also tried "connecting" them with href but didn't work as well. I thought it was a shortcut??
Mr HotSauce (4 months ago)
I just for it working I spelt style sheet wrong jeez one little stuff and the whole thing doesn’t work thnx for the vid really helpful
Kevin Powell (4 months ago)
I'd have to see your html to know what might be happening. I can't say without seeing a bit more.
Charles Goode (4 months ago)
Watching this in 2019 and it's still excellent
nada -A (5 months ago)
big like to your videos , i'm very happy because i found your channel !
Kevin Powell (5 months ago)
I'm glad you found it too!
charly chelsea (5 months ago)
Hi Kevin , i am a newbie trying to make a website using bootstrap , so i have a Bootstrap Navbar template , how can i add hover effects to it ? your help is much appreciated.
Kevin Powell (5 months ago)
I could, but it might get lost in the YT comments, it's hard for me to keep track of converstations here as YT doesn't make it easy for me to see replies. If you join us over on Discord it might make it easier :) - https://discord.gg/GaBdxcE
charly chelsea (5 months ago)
​@Kevin Powell i have added hover effect to my navbar , but it doesn't function as intended , especially when i resize the screen , it seems to mess up the links as it move them to the left and removes the space between them. could you pls help me fix it if i send you codepen link of my work or send you the whole folder of my project? it would be much appreciated.
Kevin Powell (5 months ago)
.nav-link:hover ?
Thabs Mashego (5 months ago)
2019, still relevant. Awesome.
Ankit Gupta (5 months ago)
Hi Kevin, can you tell us how to add drop down in this
Ankit Gupta (5 months ago)
@Kevin Powell i truly appreciate your efforts thank you kevin
Kevin Powell (5 months ago)
You'll want to use nested lists (lists inside your lists). I might do a specific video on it at one point. I do have an older (and a bit out of date) video that looks at it though, look up megamenu on my channel, it should show up.
Mahesh Mishra (5 months ago)
https://youtu.be/4pKYysmUnKc Pls watch this amazing nav bar. Hit like and sub pls... He is a new and good youtuber
Arnav Mahajan (5 months ago)
Which editor do you use ?? Nice video btw !
Yovan Julio Adam (4 months ago)
visual studio code
NoahOp (5 months ago)
it looks like atom
sandeep swain (5 months ago)
very much helpful .. thanks man..
Po1son (5 months ago)
Great Video! Keep Up The Hard Work!
Leah Juarez (5 months ago)
You SAVEDDDD my life! I was trying to code for a project that I have, and I just was really confused! But when I tried to looked up something this video popped up and was very helpful! So thank you so muchhhh!!!!!!
shravya kotha (5 months ago)
How to display linked HTML pages below navigation bar?
Kevin Powell (5 months ago)
Unless your using a templating language, each page would have the navigation at the top.
Aqib Laghari (5 months ago)
thanks you just saved me from a very hectic mess...you are the best...i love you, no homo
Eugene Skomorokhov (5 months ago)
thanks, you help me a lot, but should we use floats in 2019? sorry for silly questions, I am a newbie
Khalid Young (5 months ago)
Are you going to add media query’s to the nav bar ? Or would you suggest to use bs4 break points instead
Kevin Powell (5 months ago)
Responsive version here :) - https://youtu.be/8QKOaTYvYUA
Lisanne Buma (5 months ago)
I inserted a logo into the header that I found on the internet but in made the header to big because the picture is way too big how can I fix this?
Kevin Powell (5 months ago)
Make the image smaller? You'll want to use a software to resize it, but you can also use CSS to set a width or hieght on the iamge.
rorschach 1446 (6 months ago)
hey what an amazing tutorial Kevin! Thanks
Mariposa Guitar (6 months ago)
Peter London (6 months ago)
Close in on your text code .....too small...~
Kevin Powell (6 months ago)
This was my very first video, I think it's much better now 😁
Mahesh Mishra (6 months ago)
Pls like and subscribe this video https://youtu.be/4pKYysmUnKc
Manish Rahangdale (6 months ago)
Sir can you please expand that video and show that how to add responsiveness when size of display reduces, and when screen size reduces at that time the navbar converts into fa-fa-bar and all links shown inside it when we click on it..Thank you sir I hope you will explain it as early as possible.
Manish Rahangdale (6 months ago)
This example is good awesome, but I think it's not responsive one....but overall great tutorial Thank you...
Skelix UchihaX (6 months ago)
can you make a tutorial of sticky nav bar ?
Tropax K (6 months ago)
Thanks a lot for this. Does anyone know how to make the navbar active?
Faraz Hashmi (6 months ago)
Hi, Nice to Recall From You.
Aran A (6 months ago)
is there a way to change the color of the block that apears when you hover?
Aran A (6 months ago)
nvm, its is the background-color attribute...
Niko Ni (6 months ago)
thanks man, very helpful!!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.