Navbar CSS tutorial: 3 ways to create a navbar with flexbox.

 Navbar CSS tutorial: 3 ways to create a navbar with flexbox.

Hey, I'm Terrius, and in this quick course you'll create three different website navigations using CSS Flexbox. If you'd like to download the course files, including the final code, 

 

 After you join, you'll get instant access to these course files and all of our current free courses. With that out of the way, let's get started! To start, I'm going to come into my Desktop and I'll create a New Folder here and just call this 'Navbar'. And within this, I'm going to create three folders, just numbered 1, 2, 3, and this is going to represent the three different types of navbars that we're going to be creating in today's course.

 

Then you can see here that I have this 'image' folder already here on my desktop, and that's just a quick logo that I made in Sketch, and that's going to be included in the course files. And what you can do is just copy this folder, and I'm just going to paste it into each of these, right here. Then once we do that, we can head into Visual Studio Code. I'm going to come up to File, Open and then head into my Desktop, then into 'navbar' and then open the first project.

 

 Then, once this opens up, we can go ahead and click here to add a new file, and here I'm going to do 'index.html'. Then I'm going to create another file and I'm going to call this one 'styles.css'. Then let's head into the index here, and I'm going to type out 'html'.

 

You can see here they have 'html5-boilerplate', which is a a plugin that I actually installed in Visual Studio Code. So, once we click that, it just gives us some boilerplate out of the box. So, I'll be sure to include this in the description as well, as a course file, in case you want to install this on your Visual Studio Code as well. Now, let's go ahead and just edit some of this stuff.

 

So, I'm going to get rid of this, I'm going to add a title here, something like, you know, 'Navbar'.

 

 I'm going to leave the description blank. The style sheet is also going to be important, so 'styles.css'. Let's go and get rid of this comment. Go ahead and get rid of this 'script' tag. And then, in-between the body, we can go ahead and add a 'header' tag. Then I'm going to pull in the image, and that's going to be a 'class' of 'logo'. And the 'source' is going to be 'images/logo.svg', and on 'alt', we can just give that something like, just 'logo', something simple for this case. And now what we can do is go ahead and use 'nav', so I'm going to create a 'nav' tag. And here is where our links are going to be. And I'm going to use an 'unordered list' and give that a 'class' of 'nav links'.

 

All right, so now we did that, we need an 'each list' element, and on that it's going to have a link inside of it, so 'a' tag.

 

 And the 'href' here is just going to be a dummy link, so it's just going to be a hashtag, and let's go and close that off. And inside here, I'm just going to do 'Services', then I'm going to copy this first link. And then paste it in twice, and just go ahead and change the name here to different things. So, let's do 'Projects' and the next one could be 'About'. All right, so now we're almost done. All we have to do now is go ahead and do the button.

 

 And here I'm going to do another tag, or a8400:03:32,810 --> 00:03:35,030link tag, and on this I'm just going to call this a 'cta' with 'href' equal to a hashtag. Then I'm going to put a button in the middle of that 'a' tag. And on here we can just call that 'Contact'. Then we can just go ahead and save it, and that's everything we wanted to do with our HTML. Now, let's go ahead and open this up. You can see here that we have the basics, you know, content here for our 'nav'.

 

Now let's go ahead and jump into these 'styles' and start writing everything we need here. Now, the first thing we want to do is pull in the Google font that we're going to be using. So, let's head back to fonts.google.com. I'm going to type in 'Montserrat'. I'm going to add it here and come down here, click on Customize. I actually just want the Medium 500, so untick the Regular. Come up to Embed and then to  @Import and just pull in the stuff  in-between the two 'style' tags.

 

Then we can just import this at the top of our CSS. And then I'm going to add some styles here that override everything. So, let's go ahead and do 'box-sizing', and that's going to be 'border-box', 'margin' is going to be 0, 'padding' is going to be 0. And on the 'background-color' I'm going to just add, like a dark gray, so #24252A.

 

 All right, now what I'm going to do is just go ahead and add some styles here for the font, so 'list'. We also want that to apply to the 'a' tags and also the 'button'. And here is where we're going to set the 'font-family' to that 'Montserrat' that we pulled in. The fall-back here is just going to be 'sans-serif'. The 'font-weight' is going to be 500, which is also what we pulled in from the Google Font. And the 'font-size' is going to be 16 pixels.

 

 The 'color' is going to be an off-white, so we want to do #ecf0f1, and the 'text-decoration' is going to be set to 'none'. Next step, we're going to target the 'header', and here we want to actually place the 'display: flex'. And here we're going to do 'justify-content', and the setting we want to have is 'space-between'. What that's going13600:06:12,969 --> 00:06:15,219to do is, it's going to push the left and13700:06:15,219 --> 00:06:17,979right item to the far edges, and then the item in the middle is going to evenly space between those two. All right, so now let's do 'align-items: center', and that's just going to take everything in the header and then center it on one another.

 

Then next step, we're going to add some padding here, so let's do 30 pixels on the top and bottom and then 10 pixels on, excuse me, 10% on the sides. All right, let's go ahead and just save this and come back into our browser and refresh this page. So, you can see here, you know, the logo and the Contact button are both pushed to the far edges, and then we have the 'nav' section here equally distanced between both of these. So, you can see here, just with a couple of things, it's already starting to, kind of, you know, look like it's really close. There's a couple of more things we want to do here, and the first one is to go ahead and add some stylings for the logo.

 

And on this, we just want to do a 'cursor: pointer', so when we hover over it, it's going to turn into a cursor. Then on 'nav_links' I'm going to set a 'list-style' to 'none'. Then after that, we can do the 'nav_links' as well and then target each individual item. And on here we want to do 'display: inline-block', so instead of going up and down, they're side by side. And on the 'padding' I want to do 0 on the top and then 20 pixels on the left and right. Then what we can17200:07:50,889 --> 00:07:54,340do is go ahead and target the 'nav_links' items, but also the 'a' tags that are within them. And here we're going to do a 'transition' of 'all 0.3 seconds'.

 

We'll have an 'ease' on that, so it's nice and smooth and there's going to be no delay, so 0 seconds. Then I can go ahead and just copy this. And after this 'a' tag, we want to type in 'hover'. So, this actually is when we have our mouse over it. And on here, I'm just going to change that color to a nice blue color, so let's do #0088a9.

 

And next step is the button styles, so let's do 'button'. 'Padding' is going to be 9 pixels and then 25 pixels. Background color is going to be set to an actual RGBA, because when we do the hovered, we're going to actually drop the opacity, so it needs to be RGBA, because RGBA has the alpha value for the opacity. And on here it's going to be 0, 136, 169, and then just 1 for the alpha value. Then next step, we're going to do 'border: none', then 'border-radius' is going to be 50 pixels. 'Cursor' is going to be 'pointer', and transition is going to be the same up here. Let's go ahead and just copy this 'transition' here, and I'm going to paste it in.

 

Next step and the last thing we want to do is just go ahead and actually just add the button hover. It looks like I missed the pointer, so let's type that in, OK. And fix that typo. Cool! So, now let's do 'button: hover'. And on here we just want to copy this 'background-color' and change the alpha value here to 0.8. All right, so let's go ahead and save that. And now, when we refresh this, we can see that we have the basic design here for our first 'nav'.

 

So, once we hover over this, you can see the links change, and once we hover over Contact, it should, kind of, you know, get a little darker, 'cause the opacity is blending in with this black background. So, now that we did the first 'nav', let's go ahead and start doing the second 'nav'. And I'm going to come back into my Desktop here and copy the 'index' and 'html'. Excuse me, I'm going to copy the 'index' and 'styles' and then paste them here.

 

Then I'm going to head back to Visual Studio Code and open that folder. So, let's head back to '2'. And we don't actually want to change anything in the 'index', we just want to come into these 'styles'. There's a couple of things that we want to change here, so the first one is 'justify-content'. So, instead of 'justify-content' as 'space-between',

 

I'm going to do 'flex-end', and that's going to push everything to the right. So, let's go ahead and just save that and show you the changes as they happen. But first we need to open this up. And now you can see everything's been pushed to the right. So, now what we want to do is make the logo just flow over to the left. To do that, we can come into 'logo'. I'm just going to add 'margin-right', and then set that to 'auto'.

 

 And then, once we save that and refresh, you'll see the logo is floating way over here to the left. And everything now, once we hover over, has that styling. Now, I think there's just one more thing that we want to do here and that is to add a little bit spacing here on the Contact. So, let's come into the styles here, scroll down to the 'button', and let's add a 'margin-left' of just 20 pixels. Once we save that and refresh it, you can see now that everything is evenly spaced out. All right, so now that we did that, you can see now we have another version of our navbar, so let's go ahead and start on the third one. And to do that, I'm just going to come into the first one, actually, and copy the 'index' and 'styles' and then paste that into '3'.

 

Then head back to Visual Studio Code. Let's go ahead and open up the third project here. Come into our 'styles', and on the 'logo', you can actually use something with Flexbox called 'order', which allows you to actually set the order of child elements. So, for here, we want the logo to be to the far right, but in the HTML it's actually the first thing. So, what we want to do is just type in 'order' and then give this a value of 3. And we also want to do 'margin-left', we want to set that to 'auto', so it pushes it to the far right.

 

Next step, we want to target the 'nav'. Now, we didn't do this in the other ones, because we didn't want to specifically set the order of this, and the order of this is going to be set to 1. So, let's go back into our HTML and just talk about why we have to target the 'nav'. The reason is that we set the 'display-flex' to the header and the 'nav' is a direct child of it. So, this image here, which is on the class of 'logo', the 'nav' and this 'a' tag, which has the class of 'cta', are all children of it, and that's what we need to target when we want to change the order. All right, so now that we did that, the next thing we want to do is go ahead and change the CTA order. So, let's come down here and create a 'cta' class and set the 'order' here to 2. Now let's go ahead and save this. Let's come in and open up the third index here.

 

You can see here that everything looks pretty good. There is some weird spacing here that we need to fix and also too, remember that we added padding to this. So, if we come in and inspect this, you'll see that this list item has a little bit of spacing, so it's really not truly to the far left, but we can get rid of that here in CSS. The first we want to do is just go ahead and fix the button, and the button needs a 'margin-left' of 20 pixels. And to fix that specific link, the first one, copy this. And here we can do 'nth-child', and the child that we want to do is the first one. And then what we can do is just change the padding here. So, let's type in 'padding'.

 

And the padding is going to be 0, 20 pixels, 0, 0. That's going to get rid of that left padding. So, once we refresh this, we see the Contact button now has a little bit of padding here. And the Services, if we inspect that, the first element doesn't have that left padding. And there you go, that's everything for this quick video. You can see how you were able to create three different types of navbars really quickly, by just changing a couple of things in CSS, using CSS Flexbox. If you found this video helpful, please give it a thumbs-up and consider subscribing. And also be sure to check out our other design and code courses.