Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox

Hey, I’m Hunter from Skillthrive, and in this quick course you’ll create three different website pilotings exercising CSS Flexbox. If you’d like to download such courses folders, includes the final code, all you have to do is become a free representative on skillthrive.com. The join is in the description. After you meet, you’ll get instant access to these course enters and all of our current free courses. With that out of the course, let’s get started! To start, I’m going to come into my Desktop and I’ll create a New Folder here and simply announce 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 kinds 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 there on my desktop, and that’s just a immediate badge that I determined in Sketch, and that’s going to be included in the course data. 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 register, 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 the government has’ html5-boilerplate ‘, which is a a plugin that I actually install in Visual Studio Code. So, formerly we sounds that, it merely leaves us some boilerplate out of the box. So, I’ll is secure to include this in the description as well, as a direction document, in case you want to install this on your Visual Studio Code as well.Now, let’s go ahead and time edit some of this nonsense. So, I’m going to get rid of this, I’m going to add a name here, something like, you are familiar with,’ Navbar ‘. I’m going to leave the description space. The style membrane is also going to be important, so’ styles.css’. Let’s go and get rid of this criticism. Go ahead and get rid of this’ dialogue’ label. And then, in-between the body, we can go ahead and computed a’ header’ tag. Then I’m going to pull in the likenes, and that’s going to be a’ class’ of’ logo’.And the’ beginning’ is going to be’ epitomes/ logo.svg ‘, and on’ alt ‘, we can exactly grant that something like, just’ emblem ‘, 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’ label. And here is where our links are going to be. And I’m going to use an’ unordered list’ and cause that a’ class’ of’ nav_links’. All title, so now we did that, we need an’ each listing’ part, and on that it’s going to have a link inside of it, so’ a’ label. 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’ Service ‘, then I’m going to copy this first attach. And then paste it in twice, and just go ahead and reform the refer here to different things. So, let’s do’ Activities’ and the next one could be’ About’. All privilege, 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 call, or a8400: 03:32, 810 –> 00:03: 35,030 tie-in tag, and on this I’m just going to call this a’ cta’ with’ href’ equivalent to a hashtag. Then I’m going to throw a button in the midst of that’ a’ tag. And on here we are able to time 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 now 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 front back to fonts.google.com. I’m going to nature in’ Montserrat ‘. I’m going to add it now and come down now, click on Customize. I actually time crave 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’ mode’ calls. Then we can merely import this at the top of our CSS. And then I’m going to add some wordings now that invalidate everything.So, let’s go ahead and do’ box-sizing ‘, and that’s going to be’ border-box ‘,’ perimeter’ going to get 0,’ padding’ going to get 0. And on the’ background-color’ I’m going to time add, like a dark grey-haired, so #24252A. All liberty , now what I’m going to do is just go ahead and add some modes here for the typeface, so’ schedule ‘. We too want that to apply to the’ a’ tags and likewise the’ button ‘. And here is where we’re going to set the’ font-family’ to that’ Montserrat’ that we drew in. The fallback here is just going to be’ sans-serif ‘. The’ font-weight’ is going to be 500, which is also what we plucked in from the Google Font. And the’ font-size’ is going to be 16 pixels. The’ colouring’ 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 pace, we’re going to target the’ header ‘, and now we want to actually plaza the’ expose: flex ‘. And now we’re going to do’ justify-content ‘, and the place we want to have is’ space-between ‘. What that’s going1 3600:06: 12,969 –> 00:06: 15,219 to do is, it’s going to push the left and1 3700:06: 15,219 –> 00:06: 17,979 privilege component to the far periphery, and then the item in the middle is going to evenly room between those two.All privilege, so now let’s do’ align-items: midst ‘, and that’s just going to take everything in the header and then center it on each other. Then next stair, we’re going to add some cushion here, so let’s do 30 pixels on the top and tush and then 10 pixels on, excuse me, 10% on the two sides. All title, let’s go ahead and exactly save this and come back into our browser and refresh this sheet. So, you can see here, you are familiar with, the logo and the Contact button are both pushed to the far perimeter, and then we have the’ nav’ division here evenly distanced between both of these. So, you can see here, time 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 computed some stylings for the symbol. And on this, we just want to do a’ cursor: needle ‘, 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’ nothing ‘. Then after that, we can do the’ nav_links’ as well and then target each individual item. And on here we want to do’ showing: inline-block ‘, so instead of going up and down, they’re side by side. And on the’ padding’ I wishing to 0 on the top and then 20 pixels on the left and right. Then what we can1 7200:07: 50,889 –> 00:07: 54,340 do is go ahead and target the’ nav_links’ items, but too the’ a’ tags that are within them. And now we’re going to do a’ modulation’ of’ all 0.3 seconds ‘. We’ll have an’ simplicity’ 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 simply simulate this. And after this’ a’ call, we want to type in’ levitate ‘. So, this actually is when we have our mouse over it. And on now, I’m just going to change that dye to a nice blue-blooded colour, so let’s do #0088a9. And next step is the button vogues, so let’s do’ button ‘.’ Padding’ is going to be 9 pixels and then 25 pixels. Background coloring is going to be set to an actual RGBA, because where reference is do the hovered, we’re going to actually fell the opacity, so it needs to be RGBA, because RGBA has the alpha price for the opacity. And on here it’s going to be 0, 136, 169, and then precisely 1 for the alpha price. Then next stair, we’re going to do’ mete: none ‘, then’ border-radius’ going to get 50 pixels.’ Cursor’ is going to be’ arrow ‘, and transition is going to be the same up here. Let’s go ahead and simply copy this’ transition’ now, and I’m going to paste it in. Next pace and the last thing we want to do is just go ahead and actually only add the button hover.It looks a lot like I missed the needle, so let’s type that in, OK. And fix that typo. Cool! So , now let’s do’ button: flit ‘. And on here we just want to copy this’ background-color’ and deepen the alpha significance here to 0.8. All liberty, 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, formerly we hover over this, you can see the links change, and once we hover over Contact, it should, various kinds of, you are familiar with, 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 largest’ nav ‘. And I’m going to come back into my Desktop now and simulate the’ indicator’ and’ html ‘. Excuse me, I’m going to copy the’ indicator’ and’ wordings’ and then paste them now. Then I’m going to honcho back to Visual Studio Code and open that folder. So, let’s ability back to’ 2 ‘. And we don’t actually want to change anything in the’ indicator ‘, we just want to come into these’ forms ‘. There’s a couple of things that we want to change now, 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 time save that and demo you the changes as they happen. But firstly we need to open this up.And now “youre seeing” everything’s been pushed to the right. So , now what we want to do is impel the logo just flow over to the left. To do that, we can come into’ insignium ‘. I’m just going to add’ margin-right ‘, and then gave that to’ vehicle ‘. And then, once we save that and refresh, you’ll ensure the insignium is floating mode 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 only 20 pixels. Once we save that and refresh it, you can see now that everything is evenly spaced out. All claim, 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 firstly one, actually, and simulate the’ indicator’ and’ wordings’ 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’ badge ‘, you can actually use something with Flexbox announced’ fiat ‘, which allows you to actually defined the order of child aspects. 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’ prescribe’ and then give this a value of 3. And we also want to do’ margin-left ‘, we want to set that to’ vehicle ‘, 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 rules of this, and the rules of this is going to be set to 1. So, let’s go back into our HTML and time 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’ badge ‘, 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 freedom, so now that we did that, the next thing we want to do is go ahead and alter the CTA order. So, let’s come down here and create a’ cta’ class and positioned the’ require’ 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 included padding to this.So, if we come in and scrutinize this, you’ll see that this list item has a little bit of spacing, so it’s really not absolutely 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 relation, 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 pillow here. So, let’s type in’ padding’.And the stuffing going to get 0, 20 pixels, 0, 0. That’s going to get rid of that left padding. So, formerly we freshen this, we interpret the Contact button now has a little bit of padding now. And the Work, if we inspect that, the first constituent doesn’t have that left padding. And there “theres going”, that’s everything for this quick video. You can see how you were able to create three different kinds of navbars really quickly, by only modifying a couple of things in CSS, using CSS Flexbox. If you find this video helpful, being given it a thumbs-up and consider agreeing. And likewise be sure to check out our other design and code trends ..

alpha

As found on YouTube

Share this article

Leave a comment