How to create an awesome navigation bar with HTML & CSS

hi there and welcome today we're going to be looking at how to build an awesome-looking navbar with HTML and CSS on my screen right now I've got a finished version of what we're going to be doing and I think I've got it looking pretty good I got my logo over here I got my links and I put this kind of fun little hover effect on there to make it a little bit more interesting than what we normally see so let's dive in there and see how we can do this so the first thing we have to focus on is the markup or just our basic HTML there's not very much to this since we're just looking at the navigation menu so let's jump in here and just do the first thing I have is my logo which is just a nice little image assets the logo dot PNG it's my logo and I'm going to give it a class of logo while I'm here let's jump back to my file save that whoops I'm on the run there we go there's my navbar popping up my little logo that I created and the next thing I want to do is come down here and let's make a nav closed-mouth and let's come right to there we need a ul close ul and then we need Li a href and let's just close a close ally so then I have a list item with my link inside if you're not sure why I'm using a list item it's because list items are the most prevalent way not way the most prevalent thing you'll see people use for navigations these days and I'm having trouble talking and typing at the same time so let's finish that save there we go we see it that really ugly blue it sort of hurts the eyes right now while it's on that gray so as I was saying unordered lists are the most prevalent way of creating navigation menus it's not the only way there's other ways of doing it but if you're just getting into HTML and CSS which I'm assuming you are if you're watching this it's just you see it everywhere if you're using a template using something like bootstrap foundation or other frameworks you're going to see things like this if you're using templates that you've downloaded if you're editing somebody else's site this is what you'll see and really it makes sense once you think about it for a second this is a list of all the different pages on my website and that's it we have my list of websites so I'm using my unordered list I'm putting it in a nav tag just to be a little semantic there which is all inside my header I'm using a container here I forgot to show that to you before so I have the container that was what we were starting off with and if I jump into my styles the container just has a width of 80% now to stop it from holding up on the side of the page and I have my background color no margins and I just change my font over here and I'm using a Google font so I've linked that Google font right there I'm going to set a nice background color on here that's nice teal ish d6a a and there we go that comes in and looks very pretty and now generally speaking the next thing that you're going to do is something like this I want my logo just stay on the left so I'm going to flow to the left and that's going to free up all this empty space over here it's going to let my list come up so when I save that you can see my list sort of moves up there there's some other weird issues coming up but that's okay and that's fine now I'm just going to take my whole nav we want that to be on the right float right and it goes over there and I go oh man what happened my header disappeared oh that's weird this is a problem you've probably run into you before this is floating left this is floating right the container they're inside just shrinks away to 0 pixels it's still there but it's ignoring all the floating items so I'm just going to do a nice little clear fix on this of header after content is whoops display table and clear it both and like magic it comes back now if you don't know how this clear fix is working you don't really get it I'm just going to put a link down in the description below that goes into a lot more detail on what this is from CSS tricks that but this is pretty much you know I wouldn't always have it on my header necessarily I'd probably set up a clear fix class that I could use wherever I need it but in you know this is exactly what would be doing it's just pretty much putting in something that has a clear after both of these that sets it up properly now the next thing I always do is nav ul so I want to select my unordered list inside my navigation now let's just give myself some space here so it's easier for you guys you know this is the only unordered list on this page so I could just do ul but of course I want to be a bit more specific let's say that you know hopefully this would actually be getting used on a real website and I want to make sure that only my navigations ul gets this of a margin:0 and you're going to see that's going to take that space off on the top and the bottom when I save that next is padding:0 and it actually we won't see a change there but the padding there is a space on the side here that just disappeared and last but not least list-style:none and now if we come and look here when I save there go those dots that looked really ugly awesome um so let's go now and I want my nav li so I want the list items because I have a problem right now my list items are all stacked one on top of each other and obviously they need to go next to each other and not on top of each other so there's a few ways I could do a float:left and it works they go up next to each other I actually prefer you not using flow here I prefer using a display:inline-block it does put a little space between them most of the time that doesn't cause an issue for me and I personally think it is a bit more versatile because it lets me use different text alignment on it you know text-align:right text-align:left text-align:center in this case it wouldn't really make a big difference but in other scenarios it can you know come in i find this more versatile but if you want to use floats go for that there's no problem with that at all i'm also going to do a margin left of about 70 pixels and there we go just to give my space in between each one now i could do just a margin 35 let's say margin zero top and bottom 35 left and right now you can see how that pushed it away here let's do an undo on that it's just your margin zero so if I leave my mouse here it pushes away from my mouse so it's putting a big empty space here I don't want that because ideally all my content on this page will be lined up nicely on the right side so I want my margin only to be on the Left margin left 70 pixels i keeps my spacing the same but it keeps my alignment nice there and i'm also going to give a padding top of 25 pixels and let's just save that and this is going to fix some things in a second and this is really specific for this one just because of how i'm going to be creating this little animation on the top right there so it doesn't always have to be a padding top but in this case that's what we're going to want to go with okay and let's just wait you know it sort of looks kind of crappy right now let's just call my logo and add patting say 10 pixels zero let's see what that looks like there we go just to give myself a little bit of space on the top and the bottom and it sort of centers that at the same time you know what this padding let's make it like 23 maybe it looks more centered I think so we're just a bawling it but there we go okay I keep adding this empty space and I think it's going to get rid of it again on me um but that's okay let's make our links look a little bit better so my nav a and of course I'm doing navitat a you'll see that you'll see you know it's get really specific things like this if you do I'm not getting that specific because I don't have to if it was a bigger project where there's lots of different use cases maybe I'd need to in this case nice and simple the only links I'm going to have in my navigation are these ones so I'm just going to keep it like this so let's change our color right away that looks a lot better let's turn off that underlined text decoration and then um text transform my auto-completion thing isn't working very well today transform uppercase as you see I love the czechs transform uppercase I think it works really really well and it's my font weight correct I don't feel like my font weight is okay 300 hmm pretty sure it's okay and linking to the right yeah it is what it is looks a little thin here I find but that's okay and oh maybe it's because the font size is too small that's font size makes it I have it up in 16th right whatever it is what it is let's keep going a little light maybe I'll come back to that after just to make it so we can see that a little bit better and the last thing just for now that I'm going to do is come in and give that a hover so my hover and let's just change the color to black and take a look and yeah we can barely see that I linked this to the font weight 300 let's move up to a 400 and just make sure I'm linking to the 400 save save there we go we can see that a little bit better now okay perfecto now the tricky part comes in so I have this hover effect it's not even that obvious it's really really subtle I want it to stay settle like that it's sort of part of the point but I want we want to add this effect into the top that's really what's showing that we're selecting that page or that we're hovering over that link before we click on it so to do that there's a few things we got to setup first I want to use a pseudo element which is the before it's sort of like here where I'm setting up an after and I'm putting in a table that's not actually in my HTML I want to be doing the same thing I want this to be a little block level element that hides and shows when I hover on top here so there's a few things that I need to do the first thing I'm going to have to do is I'm going to have to set up my list item to be a oops position:relative and it's important that my position is relative on this and we'll see why in a second so let's come after all this and we're going to set up a nav a 4 so it's sort of when you do the before like this it's in my link before the text what are we going to have so the first thing I need to say that there's content and there's actually no content in there and when you display:block okay block let's give it a height of 5 pixels to start with a width of 100% and a background color that matches our check for for-4 so you can see bang there there there's the those elements coming in right there they're five pixels tall they have a width of 100% that's a hundred percent of my a so or actually it's probably 100 percent of my list item actually and this is where this position:relative is helping out if I take that off and I save no it doesn't change anything hmm I thought it would have there that's okay that's not really what's the point of this position relative where that position relative really kicks in is when I do display:block I want to do oh oh this width 100% agree position I've so looked and you can see it sort of went crazy right now position there we go I knew this was supposed to be doing something so if this is position absolute and the width is set to 100% you can see it's actually shooting and I'm getting this big side school it's going to a hundred percent of my screen size and the absolute positioning is absolute relative to my browser window unless I change this to relative and now this absolute position is relative to my list item and it works a much nicer it's keeping a hundred percent of my list item rather than a hundred percent of my screen with that big side scroll it was going on with this I can also do a top of zero and bang that looks a lot better and I'm just going to move this width down here because they sort of play together so it's up exactly where I want it to be the trick right now is I don't actually want to see it so my width is going to be starting as zero percent and it disappears so it's there but it has a width of zero and now what I need to do is come in my nav a before that's all right my nav a:hover before we're getting crazy with our pseudo stuff here and all I need to do is the width of a hundred percent I believe and there we go it's bang when I hover over though with switches from zero to 100% and I see that going over and right away already that's kind of cool but it's really on when you're going fast you see this little like Paul you know that can get kind of annoying and it can go a little too fast maybe for you and to flickery and all of that so we can just come in with a nice little transition on here transition oh not text-align let's type it up in transition let's just do I'm going to transition all let's do a nice ease in out which is my favorite transition at plus-2 250 milliseconds and ooh and even if someone goes really fast doesn't get that annoying little flash that we were getting before it just sort of like you know animates in and out the whole time and obviously if I made this longer let's make it a thousand which would be way too slow but it gives you that nice little animation there but nobody's actually in a hover over and wait for it to animate so you know - 200 250 s probably nice little compromise where it comes in you can see the animation nicely and I think it looks pretty nifty and good so at the end there got a little tricky and I had to do a few things that if you're not familiar with the CSS the basic CSS it might be like what's he doing with all this weird stuff here you know the a:hover before and all that but try it out play around with a little bit the best way to get better at this stuff is to experiment to see really what's going on so but if you have any questions or anything like that just go down into the comments below and ask away I'm glad to help out that's what I'm here for is to show you guys fun new cool things help you understand a little bit more and this channel is all about making the internet look a little bit nicer at the same time so we want to learn how to do it but we want to learn how to make it look good too so I hope you like this I hope it you you know you take something away from it try something out you know see if you can do something even cooler now that you know how to do this and if you do something cooler make sure you link to it down in the comments below so I can check it out I'm going to do my best to reply to everybody that does leave a comment so even if you're just saying hi I'd like to say hi back to you and yeah thanks a lot for watching I hope you had as much fun watching this as I had making it and until next time have yourselves a great day

Channel: Kevin Powell

Views: 707,076

Rating: 4.9020643 out of 5

Keywords: HTML, CSS, Tutorial, Navigation, Navbar, Nav bar, nav menu, navigation bar, navigation menu, Cascading Style Sheets (Programming Language), HTML (Programming Language), how to, coding, coding tutorial, internet, nav help, better nav, html5, css3, Kevin Powell, hover effect, navbar css, html css navigation bar tutorial, awesome navbar, css navigation bar, how to create a navigation bar in html and css, navigation bar css, css navbar, navigation bar in html and css, nav bar css

Id: FEmysQARWFU

Length: 19min 2sec (1142 seconds)

Published: Wed Oct 12 2016