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

How to create an awesome navigation bar with HTML & CSS

2105 ratings | 163699 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 (671)
Ben u f o (1 year ago)
Learning to code, this is amazing thanks man! all working first time.. thanks for taking the time to do it!
Kevin Powell (10 months 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.
Neo Forever (10 months 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?
Rohit Jawale (18 hours ago)
Is it responsive ?
Kevin Powell (16 hours ago)
No, but I recently made an updated version which is - https://youtu.be/8QKOaTYvYUA
Moustapha Diouf (1 day ago)
that's just awesome thanks dude
Son Nguyen Hoang (2 days ago)
Thank you sir :D
Ish Vlogs (2 days ago)
Hey there. This is a wonderful video. I saw the start ofyour other video about how to make a responsive version and you said that you used floats. Is there a problem with using floats this is my first time making a navbar and your video was very simple and easy to follow. Thanks in advance.
Ish Vlogs (16 hours ago)
+Kevin Powell Thank you very much. By any chance do you have a tutorial on flexbox
Kevin Powell (16 hours ago)
Nothing wrong with floats at all, but flexbox opens up a much better world of layout. It is more complicated (though how it works is more intuitive than floats). It also makes responsiveness much easier.
Aromatherapy France (6 days ago)
hello. I'd did the same coding in my css file, But my mega menu list become narrow block..and there's no bar above the menu list.. just showing like this : https://quizzical-brahmagupta-24080b.netlify.com please help. thank you.
Aromatherapy France (5 days ago)
oh let me try. Thank you ! once again, your tutorial really helps a lot! thanks for helping us!!
Kevin Powell (5 days ago)
You're menu-sub has a width of 100%, so it's matching the width of it's parent. You'll want to make an adjustment there.
Aromatherapy France (8 days ago)
I'm highly appreciated for your tutorial! Thank you!
Kevin Powell (6 days ago)
You're welcome!
Shaw358 (14 days ago)
Hey, how do you have that live website while using atom?
Kevin Powell (12 days ago)
Here you go :) https://youtu.be/h24noHYsuGc
waweru benson (15 days ago)
Thanx pall, nice tuitoral.
Kevin Powell (14 days ago)
Thanks, I'm glad you enjoyed it :)
Albanza (15 days ago)
learn how to design responsive web design here https://youtu.be/YoWfCBUoFJE
MafiaLP (17 days ago)
Hey! what kind of tool u are using? i am using Notepad++ but youre tool is better i guess (ps. my english is not the best pls i am sry=
Kevin Powell (16 days ago)
In this video I was using Atom. I've since switched to VS Code, but they are both really nice (and free) text editors.
Philippe Anglade (18 days ago)
How is this navbar awesome ? I did the same (or equivalent.) in my early years of programming.. It was in year 2011.
Kevin Powell (17 days ago)
Sorry that you didn't like it. It's geared more to people who are just learning. I did recreate it with flexbox and grid more recently, if that's more what you're after
Alper Berber (19 days ago)
what is the name of your editor theme?
Kevin Powell (18 days ago)
This was from about 2-years ago and I'm using another editor now, so I might be wrong, but I think it was 'one dark'
Totally Beyond Me (20 days ago)
I was going to ask why you didn't use Flexbox then I noticed that you published this in 2016. Hello from the future.
Kevin Powell (20 days ago)
Miguel, flexbox a part of CSS, it was the first specification that was specifically for layout purposes. Do a quick search for it, it's awesome :)
Kevin Powell (20 days ago)
Haha. I probably should've used flexbox, even back in 2016, but I did realize my folly and redesigned it with flexbox (and gird, no less) https://youtu.be/8QKOaTYvYUA
Miguel Domingues (20 days ago)
what is flexbox?
Aeriallistique (23 days ago)
i know this might be a stupid question but: could display:flex: been used for the container and align the img and ul , instead of floating them???
Kevin Powell (22 days ago)
100% yes! I made this a long time ago (flex was a thing, but I wasn't comfortable with it then). I recreated this, and made it responsive more recently: https://youtu.be/8QKOaTYvYUA
hey. why didnt you use flex for your ul ?
julioCesarNO (29 days ago)
Hey dude, what plugin are you using to get that live preview
Kevin Powell (27 days ago)
When I made this, I was using what I show in this video: https://youtu.be/h24noHYsuGc You can probably find an extension for your text editor called 'live server' that will do the same thing as well, and which I use in my newer videos at times :)
Hasnol Hadi (1 month ago)
may i know the link for the font or better way where i can use any font in my code
Kevin Powell (1 month ago)
Google fonts is the best free resouce for fonts for your site :)
Hakkelaar (1 month ago)
Watch out folks... NO sub-menu's in this tutorial!
Rohan maharjan (1 month ago)
thanks, brother!
sirricherd (1 month ago)
how are you able to have the webpage your working on update in real time without refreshing every time you save changes to your pages?
Dan Cruz (1 month ago)
How do I make the navbar scroll down with me?
Kevin Powell (1 month ago)
You'll want to use 'position: fixed;', and with that, you'll need 'top: 0; left: 0; right: 0;'
Leanne Bledsoe (1 month ago)
Thanks for this tutorial!
Kevin Powell (1 month ago)
No problem :)
Koning-Splash (1 month ago)
can i use this for my website without any copyright stuff?
Kevin Powell (1 month ago)
Anything in my videos is free to use however you want!
Thomas Roberts (1 month ago)
Hello, this video was very good and I was wondering how you got the whole top row coloured, mine Is just coloured for the nav bar and for the space next to it, it's black, how can I make all the top row coloured
Kevin Powell (1 month ago)
There is a link in the description if you want to compare your code to mine. It's hard to say for without seeing your code 😕
Ivan Zulj (1 month ago)
Great tutorial, i have one question can i use hover effect under text like underline and how? :)
Kevin Powell (1 month ago)
Yup, instead of using the top property, change it to bottom!
TVBro (1 month ago)
works great but i need to know how to make it responsive, like if i look at it on a phone or different device it will not look good it will be a jumbled mess, please help
Kevin Powell (1 month ago)
I made a more recent video where I did just that :) - https://youtu.be/8QKOaTYvYUA
Saisakshith N (1 month ago)
I want use text-aling : centre Now in which in should used it..
Kevin Powell (1 month ago)
Because this one is using floats, text-align sort of goes out the window. I made an updated version of this recently though, which you can easily center text with: https://youtu.be/8QKOaTYvYUA
Fun Stuff Family (1 month ago)
Awesome! Thanks!!
Kevin Powell (1 month ago)
No problem!
Nice one man, adding this to my learning vids.
Hadou Can (1 month ago)
So im like: html-check; css-check; javascript and then what next?
{Z3US} (9 days ago)
you might learn some php and sql tho
Hadou Can (1 month ago)
+Kevin Powell oh ok thanks, il go for a black belt in JavaScript then 😤
Kevin Powell (1 month ago)
JavaScript is a pretty big undertaking. Bigger than the other two by a long shot, and it opens a world if possible directions, so focus there and you'll find a branch or direction you'll want to go once you're deep into it, would be my guess.
twerk douglas (1 month ago)
fantastic! as a newbie, this was so satisfying to do. great tutorial!
Lil Celeri Vert (1 month ago)
Great video! But I have a question for you, is it normal that block I created over the text takes the place of the text+the margin?
Lil Celeri Vert (1 month ago)
Thank you
Kevin Powell (1 month ago)
There are a lot of ways, but none of them are obvious, hah. It sort of depends on context. You could set the parent to display: flex; justify-content: center; align-items: center;
Lil Celeri Vert (1 month ago)
I tried that but it wont center vertically: .container { margin: auto; top: 0; bottom: 0; right: 0; left: 0; position:absolute; }
Lil Celeri Vert (1 month ago)
oh ok, and I have another question about css, is there a way to center vertically a div?
Kevin Powell (1 month ago)
Normally it will be the width of the elment, not including the margin... I'd have to see more to figure out what might be going on.
Pierre Soubourou (1 month ago)
It's too small written for no reason, because there is a lot of unused space on screen, but it makes it difficult to follow on a smartphone
Kevin Powell (1 month ago)
In my newer videos the code is much bigger (this was my first video!). Sorry about that though!
Aspolo (2 months ago)
How can i make it block display? i tried everything but doesn't work for me
Kevin Powell (1 month ago)
Without seeing your code to see what's going on, it's hard to say
Jeson guillermo (2 months ago)
What text editor did you use?
Kevin Powell (2 months ago)
In this one I was using Atom, I've since switched to VS Code
amelie liu (2 months ago)
thank you..
Kevin Powell (2 months ago)
You're welcome 😁
rhino (2 months ago)
this is all going great, but there is one problem, i thought it was user error, so i copy and pasted the code from the place you uploaded it, but the problem still persists. My header is a lot larger than your, take a look for yourself. https://i.imgur.com/xF1pNh4.png Do you know what this could be?
Kevin Powell (2 months ago)
No problem 😁
rhino (2 months ago)
Kevin Powell Thanks for the quick reply! I appreciate it :)
Kevin Powell (2 months ago)
Your logo is much bigger, so it's affecting the total height
Sebastian Nielsen (2 months ago)
Instead of clearfix couldn't you just have explicitly set its height?
Kevin Powell (2 months ago)
Height is a dangerous property. For a nav, it's not terrible, but then even if I just adjust the font size here then I have to adjust the height.
william pelletiervslol (2 months ago)
hi its me again how do i change the div by an image (the background of the div will be replace by my image)
william pelletiervslol (2 months ago)
Kevin Powell thx ma website gonna be better like tht i use to put a photo for the logo and its was alway square so its looked bad and i saw a guy who did tht and i was amazed and thx again now it looked better
Kevin Powell (2 months ago)
background-image: url(path_to_image_here);
The Answer (2 months ago)
Hey Kevin, how would I get the line to go under the word instead of over it? Like an underline
The Answer (2 months ago)
Kevin Powell yeah I tried that but it didn’t work. I figured it out thru another tutorial tho. Thanks 🙏🏼
Kevin Powell (2 months ago)
Instead of using top, you could use bottom
william pelletiervslol (2 months ago)
hi kevin i like ur vid and im making a website tht work like facebook people can add there photo, tought and all they want i finished the style of the main page but now i need to know wht are the codes for making the site work same as facebook plz help me and maybe u can make a video about tht ;)
Kevin Powell (2 months ago)
I'd use a service like stripe and/or PayPal for that
william pelletiervslol (2 months ago)
Kevin Powell ok i think its the final thing i need to ask u (im not sure XD) my website need to allow payment with visa, mastercard and all the credit/debit cards how do i do tht
william pelletiervslol (2 months ago)
Kevin Powell i cant download things tht rlly sad :(
william pelletiervslol (2 months ago)
btw i want to change my div background by an image on my pc. how do i do tht
william pelletiervslol (2 months ago)
Kevin Powell my pc got a virus (ms recovery) tht block me for downloading things and it blocked my cmd, task manager regedit, notepad (for tht one i bypassed it) so i cant delete it and i cant download anything soo....tht why. btw thx for all the time you spend on teaching me those things
RainDrop Technology (2 months ago)
Thanks man, my new website looks awesome!
code rain (2 months ago)
good tutorial i liked and subscribed
Kevin Powell (2 months ago)
Glad you liked it and thanks for the sub!
Why float not flex?
that's cool thank you i have been looking for it.
Kevin Powell (2 months ago)
Because I made this a long time ago before I was using flex :P. I updated this recently using flex and grid: https://youtu.be/8QKOaTYvYUA
Soumyajit Dutta (3 months ago)
helps a lot man.thanks. need a tutorial nav bar with a search box.
michaelfrancescoo (3 months ago)
Hei man! the nav bar works but css the css trick doesnt work why? i've been do what u do but it doesnt. Btw Thank u Man (like)
Kevin Powell (3 months ago)
It's hard to say for sure... when you say CSS trick, you mean the bar sliding out? Is anything at all happening?
Janien Reeves (3 months ago)
Can you do another one its to dark to see
Kevin Powell (3 months ago)
I did a newer version of this here: https://youtu.be/8QKOaTYvYUA
Janien Reeves (3 months ago)
What are you using to code on left and site on right? I keep having to switch back and forth with notepad++
Kevin Powell (3 months ago)
I just had the editor on the left, and my browser on the right... here is how it updates on it's own : https://youtu.be/h24noHYsuGc
fuchsiapendragon (3 months ago)
Thank you, Kevin :) great explanation and pleasant voice !
EyKorMean Review (3 months ago)
This is amazing man! You did a very great job explaining how to do it... I found many toturial on YouTube they seem to do it for those who already know stuff but you did it for kind of people like me who first start exploring thing... Thanks man
Kevin Powell (3 months ago)
No problem at all, so glad you liked it 😁
Franklyn Gregory (3 months ago)
Amazing, thanks.
Programming Program (3 months ago)
Is There A > After The " On The 4 Line In index.html?
Kevin Powell (3 months ago)
I don't get your question, sorry!
Paras Arora (3 months ago)
can you plz be my mentor?...i know I may sound stupid asking that...but I wanted to give it a try...plz plz plz...I will make sure I don't bother you much...i will only ask things that I will not get....otherwise I will Google other problems and solve them myself...I just need guidance from you. I hope you read this msg... and plz give a reply even if it's no. I will still be happy that I atleast asked you...😊 .. sorry for the long msg😜
Paras Arora (3 months ago)
Kevin Powell yes yes...i can totally understand...i just asked...there is nothing wrong in asking😜 ...and thanks for replying...i was waiting for it😁 ...i will learn from your videos...no worries✌ ...thank u very much😊
Kevin Powell (3 months ago)
Sadly I can't 😕. I have very limited free time as it is, it wouldn't be fair to you if I said yes as I don't feel I'd be able to hold up my end of the bargain.
Marija Kostic (3 months ago)
could u give the link for the navbar logo image?
Kevin Powell (3 months ago)
I don't have it anymore sadly :(
ni py (3 months ago)
thnx for sharing!!
Saurab Pokhrel (3 months ago)
How to make it fixed ??
Kevin Powell (3 months ago)
add 'position: fixed; top: 0; left: 0; right: 0;
Joshua davis (3 months ago)
what text editor do you use
Kevin Powell (3 months ago)
In this video I was using Atom, I've since switched to VS Code (though Atom is still a great text editor)
Brandi Hess (3 months ago)
I'm trying to create a 3-element navigation bar. How do I get one element to sit on the left, center, and right sides of the navigation bar? The website logo will be placed in the middle, the search icon will sit on the left, and the menu icon will sit on the right.
Kevin Powell (3 months ago)
This video might be more helpful: https://youtu.be/8QKOaTYvYUA It's similar, but using flexbox instead of floats, making it a low easier to do what you're after.
Programming Program (3 months ago)
Where is the picture for logo.png?
Kevin Powell (3 months ago)
The text was part of the image
Programming Program (3 months ago)
But When I Try To Set Text Inside A Picture Like You Did, The Text Are Showing Under The Picture.
Kevin Powell (3 months ago)
This was my very first video, and sadly I didn't keep it.
MissCaramelSmoothie (3 months ago)
Great tutorial. CSS as well as HTML has so many elements do you have any resources that gives projects to finish so that I can actually use my noggin to figure out which codes to use to accomplish specific design goals?
Kevin Powell (3 months ago)
I have a few series where I build out a full page. Nothing that really acts as a challenge though...
TheAn38hbk (4 months ago)
im having trouble with adding my image. i have it save ass logo.pgn but its save as jpg
Kevin Powell (4 months ago)
Notepad++ is great, but I'd recommend something like atom or vs code. But to save your image, how are you doing it? I don't think notepad++ can change image formats
TheAn38hbk (4 months ago)
windows 10. im using notepad ++
Kevin Powell (4 months ago)
What software are you using?
Deepak S.m. (4 months ago)
Hi Kevin, i have problem with my nav bar as it takes the whole width of the screen including the scroll bar when i make the nav's display to fixed. You can see my code at https://github.com/virtualdesigner/Quizzy. Thank you so much :D
Deepak S.m. (4 months ago)
Thank you for your reply, i changed the code as what you said but that doesn't help, sorry, do you have any ideas? Thanks again :)
Kevin Powell (4 months ago)
If you put the position to fixed, instead of giving it a width, give it 'left: 0; right: 0; Hopefully that works
Dominic Davies (4 months ago)
great practise thanks Kevin!
Kevin Powell (4 months ago)
No problem, glad you liked it :D
fromCharCode (4 months ago)
Nice one! I managed to get the line below the navigation text, it looks better to me. You deserve a sub, this video was a great help for me :)
Kevin Powell (4 months ago)
Very awesome, glad it helped!
Mike Lyle (4 months ago)
We're applauding your goal and sharing of your expertise.
Kevin Powell (4 months ago)
Thanks Mike :)
mobigeek666 (4 months ago)
code in code pen is not the same
mobigeek666 (4 months ago)
Thanks! Igot it to work. sorry i'm a noob.
Kevin Powell (4 months ago)
There might be some minor differences, but it should be pretty similar. I might have updated it at one point for some small tweaks, but there shouldn't be any big differences.
srikanth KARRA (4 months ago)
Thanx it makes to understand "position", clerafix properties of styling
Kevin Powell (4 months ago)
Awesome, glad it helped
Chris Ek (4 months ago)
Can I make this nav bar responsive with media query or should I go for a diffrent nav bar?
Kevin Powell (4 months ago)
I recently recreated a responsive version of this: https://youtu.be/8QKOaTYvYUA
dev D (4 months ago)
hello! when i add display as inline block the list items tend to be arranged in opposite way as to how it was declared in html! why does this happen?
Kevin Powell (4 months ago)
The only thing that I can think of that would cause that is a float: right; other than that, I'm really not sure what would cause something like that to happen :\
Wack EJ Productions (4 months ago)
how come when I put my link into the href it takes away the hover effect and adds a line underneath it?
Wack EJ Productions (4 months ago)
Sorry just troubleshooted myself! (All thanks you to though XD) you've been great
Ashish Arora (4 months ago)
Hello My Dear Bro What is use of Adobe XD . its good to learn from youtube ?
Ashish Arora (4 months ago)
i had done GWDD course from Arena Animation In India . i know HTML , css , jQuery , JavaScript , Php Intermediate lvl . i dnot know Oop . its my first job i m handling Front hand Prestashop website . i learn lots of new things with u . I learnt Flex box , Css Grid , Navigation bar many many more things . i dnot know what to do . just take experience for 8 , 9 month here. nothing to learn new thing here
Kevin Powell (4 months ago)
Adobe XD is for creating the user interface and planning out the user experience for websites and apps. I wouldn't design a website with Photoshop today, I'd use Adobe XD. If you're just looking at being a developer, I wouldn't say you need to know it, but if you're interested in the design side, I'd definitely check it out, specially that it's free now.
Nicholas C. (4 months ago)
great video thanks
Kevin Powell (4 months ago)
No problem at all!
Marc Robison (4 months ago)
Great video! But just one question, how can you do the bar animation with an icon? It seems as if its not recognised as actual content, and the bar doesn't appear on top... thanks!
Marc Robison (4 months ago)
I'm using fontawesome.com for the icons. I linked it to to the html and css document, but when I add the hover effect with the bar on it, the icon goes on top of the menu item instead of the side, where I'd want it to be, how could I change that? (this is an example of a icon I used: https://fontawesome.com/v4.7.0/icon/info-circle/ )
Kevin Powell (4 months ago)
How are you adding the icon in?
Marc Robison (4 months ago)
That or the icon goes on top instead of next to the menu
Murtaza Ali (4 months ago)
Thanks a lot just a question tho how does the ::before work ? can u make a vid
Kevin Powell (4 months ago)
I already did :D - https://youtu.be/zGiirUiWslI
Christoffer Gavin (5 months ago)
my page does not look like yours in the final resault, i want my text in the middle of the brither color container. how do i do that?
Christoffer Gavin (5 months ago)
i must have been doing something wrong when i wrote that cus when i copied it, it worked! Thanks
Kevin Powell (5 months ago)
If you copy my HTML and CSS, it should look the same.
Christoffer Gavin (5 months ago)
correect me if im wrong, if i just cpoy your css iut would look like your style right. or its ist something diuffrent you have to do beside that?
Kevin Powell (5 months ago)
The color is just by changing the background color... Centering it, sadly with how I did it, is a bit hard. I'll have an updated version of this in the coming weeks though, in which it'll be easier.
Obito Uchiha (5 months ago)
Learnt more easily then other channels !
Kevin Powell (5 months ago)
So glad to hear that Obito Uchiha!
Trent Hogan (5 months ago)
+Kevin Powell Do you know why I can't see the container div if I give it a background color? Darn, I find CSS harder than learning C++. Just when I think I have a handle on things something like this happens. Is the container div hidden behind the header element? Also, why do we even need a container div... Sorry but I am very confused. I've watched a pile of Youube videos and taken 2 Udemy courses and it seems theres always another quirky thing that happens with CSS to throw me off. Thanks :)
Trent Hogan (5 months ago)
Wonderful Kevin, keep up the amazing work! Very much looking forward to that series.
Kevin Powell (5 months ago)
So glad to hear that Trent, too many people just want to make things work and don't care about actually understanding them. I have a series planned looking at the evolution from float to flex to grid. I'll see if I can't sneak in some explanations on how floats work into that one.
Trent Hogan (5 months ago)
Yeah, I know that with Flexbox and CSS Grid things are much less "hacky" than they used to be, but I think that it is important to understand the "legacy" way of doing things in case one needs to work on or fix an older website. Thanks Kevin.
Kevin Powell (5 months ago)
I have an old video on floats and clears, but I honestly don't remember how in depth I go in that one. To be honest floats aren't as needed as they used to be. I'm actually looking at redoing this one, but with a more modern approach and making it responsive at the same time. And Hamilton, very cool, I'm in Montreal.
Trent Hogan (5 months ago)
I am sure that is exactly what's going on. Do you have any suggestions as to videos that I can watch to explain this behavior? It's these little quirks that make learning this so frustrating. I am a guitar teacher and I like my students understanding the underpinnings of music so they can fully grasp what is happening. It seems that for one to have the feeling of complete control, one really needs to understand the behavior of the document and its element but I've yet to discover a video that really nails these characteristics down. Thank you for the prompt response! Hello from Hamilton, Ontario
Shimbu Hasa (5 months ago)
It is great to watch so good content! Thank You! I've learned really much! Keep it coming.
Kevin Powell (5 months ago)
Thanks a lot Shimbu, glad you enjoyed the video!
Lívia Belizário (5 months ago)
how do i make it fixed to the top of the page when i scroll down??
Kevin Powell (5 months ago)
add 'position: fixed' to the nav
Diane Bond (5 months ago)
love your course channel thank you
Kevin Powell (5 months ago)
Thanks Diane, sadly I can't check out the link, since it's local for your computer.
Ashwin Kumar (5 months ago)
Dear sir please teach how to make a navigation to responsive view using slick nav. waiting for ur response . Thank you....
Ashwin Kumar (5 months ago)
Thank you
Kevin Powell (5 months ago)
I'll be making a video on this in the coming weeks, it's already on the todo list :)
an ou (5 months ago)
for some reason I can not get the background color to work in the header section of the css
Kevin Powell (5 months ago)
Without seeing the code, I can't say why for sure... the most common problem I see here is putting a dot before "header", since it isn't a class, but a tag, it doesn't need one. If it's not that, I can't really say without seeing more.
Joe Rooney (5 months ago)
Really helpful, thanks :) How do you implement fonts like you did in that html file?
Kevin Powell (5 months ago)
All with Google fonts :). Find the fonts you need and it gives you an embed code. Put that in your HTML, and add the font-family in the CSS where you need it.
rickyu1978 (5 months ago)
hi kevin, i wonder if this would still apply in 2018 as an awesome nav bar. love your tutorials, i have learned a lot, but hoping you can update this without the clear fix hack , perhaps using grid and/or flexbox?
Kevin Powell (5 months ago)
Sadly I can't update videos on YouTube, though I could probably do a new one where I recreate this with flexbox. Not a bad idea actually, I'll add it to my todo list :).
clan clashers (6 months ago)
hey awesome video. Just had one question. I want this kind of nav bar but i also want to use it for the responsive nav bar with the hamburger menu. Is there any way I can have this cool nav bar in a laptop setting, but when I open it on a phone it becomes the hamburger nav bar like in one of your other videos. Or is there any way to make this nav bar responsive so that it works on a mobile device?
sachin kotian (12 days ago)
use bootstrap
3M I-T (6 months ago)
Can you please tell me how to attach a drop down menu to display files on the navBar
Kevin Powell (6 months ago)
This is overkill, but the concept would be the same: https://youtu.be/mPLIIUcjpCA
Math Don (6 months ago)
hi there, why do people use list tags to form the nav bar when they have to use css to removie the styling, what is wrong with using <a> tags?
Kevin Powell (6 months ago)
You could use a tags if you'd prefer. Technically, it is a list of the pages on the site, which is why that became the standard (at least how I understand it). It also gives a bit more control, because we can style it by hooking into more things (we can style the ul, the li and the a, instead of only the a). I've heard arguments for accessibility as well, though I'm far from an accessibility expert, so I don't actually know if that's valid or not.
Liam Hirst-Graves (6 months ago)
Thanks so much for your videos! I’m learning a ton from you. You’ve been more helpful in 2 videos than my whole university course on web design!
Kevin Powell (6 months ago)
Very kind of you Liam, I'm glad that you've found my videos useful 😁
Derkking (6 months ago)
Thanks dude, works for me!
Kevin Powell (6 months ago)
Awesome :D
Sandra V (6 months ago)
this is a tutorial what reeeally earns this label. Your variations what would happen with what changes are awesome. Further stuff explaination like in 9:30 brings this tutorial to "wow nice to have seen that" level ;-) and 14:50 " i knew this was supposed to be doing something" just made my day! will watch muuuch more from you! please keep on! this is F U N
Kevin Powell (6 months ago)
Thank you so much for the kind words, Sandra! Really makes my day knowing that people are enjoying my content so much (and learning from it, of course!)
Vivek Rajput (6 months ago)
Nice video Kevin, but I got confused about that 'clear-fix' thing so I set header height to 150px and it worked. Can you explain? Thanks
Vivek Rajput (6 months ago)
Thanks, Kevin., I also found this brilliant answer which helped me understand it. Would appreciate if you link it to your description for others https://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do
Kevin Powell (6 months ago)
When we float things, it causes issues, because the parent container no longer "sees" the floating elements. The clearfix adds in a pseudo-element that has "clear: both" on it, in order to fix that issue. As a general rule of thumb, I'd avoid using heights, because then if you change the content (such as a bigger or smaller logo), you might have to readjust the height.
Smackindaface (6 months ago)
Great stuff :)
Kevin Powell (6 months ago)
Thanks :D
Krishna V (6 months ago)
Hi Kevin...this video is a great help for a beginner like me!! Thanks for sharing your knowledge!! keep goin.. :)
Kevin Powell (6 months ago)
No problem at all, glad you liked it.
Daniel Cazarez (6 months ago)
This looks very neet!
Kevin Powell (6 months ago)
Glad you liked it Daniel :)
Nando Keers (6 months ago)
how do i get the lines that appear when i hover over on the bottom of my text?
Kevin Powell (6 months ago)
That's from the pseudo elements that I was using in the tutorial.
Ronni Bantz (6 months ago)
Awsome navbar :D Thanx for the video , was a lot of help:)
Kevin Powell (6 months ago)
Great to hear, thanks :D
Itz CSS (6 months ago)
Please check this Navbar out | I made it myself... https://www.youtube.com/watch?v=20FrV8muALs Thank you
Kevin Powell (6 months ago)
Nice stuff Itz CSS :)
meshach ojeda (6 months ago)
cool Video! i really like that effect on the hover. I have to learn more about the pseudo selectors :(.
Kevin Powell (6 months ago)
Glad you like it! As far as pseudo elements go, I've got a short series that explores them! https://www.youtube.com/playlist?list=PL4-IK0AVhVjPBX_HelwDlNsTiyr2YGSBw
Zishawn Malik (7 months ago)
If you need any more help, just look up "w3 schools html"

Would you like to comment?

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