3.2 Styling the Header
It’s time to get our hands dirty and tackle the main navigation bar at the top of the page, as we discuss strategies for overriding existing Bootstrap styles.
1.Introduction2 lessons, 05:34
2.Structuring Your HTML9 lessons, 1:03:52
3.Styling the Page5 lessons, 43:27
4.Conclusion1 lesson, 00:31
3.2 Styling the Header
Hello and welcome back. In this lesson, we're gonna get started on the Nav bar at the very top of our website. And we're going to hopefully try to make it match our Photoshop file. If we jump over to Photoshop. Zoom out a little bit. You'll see that this is actually a very simple nav bar with a white background and a grey border around the bottom. And you'll notice the active link has this extra border at the bottom, and we're going to accomplish that. If you notice, it doesn't take up the same width as the button itself. It's actually smaller in width than the button so instead of setting it as the bottom border for the active button, I'm going to use the after pseudo class to create a little rectangle and we'll fill in the rectangle that way. But first, let's just start with the overall Nav bar. Again, it's very simple. It's just a white background with a gray border on the bottom. So let's jump into our code and we've started a new folder, so all the changes we make in this lesson will be saved in the SITE011 folder. And here's our navbar here, it's the section that starts with nav. We have the navbar, navbar default, navbar static top. Those are all Bootstrap classes. And we're going to override the nav bar static top class to give it a background color. So I'm gonna jump into CSS, our site.CSS file. I'm gonna scroll down to the bottom, and I'm gonna create a new commented out section, and I'm just gonna call that HEADER. That way it's gonna be a lot easier to navigate through our CSS File, and I'm gonna create a rule for navbar-static-top. Now, right now, our nav bar has a light gray background, we wanna give it a white background. So we're gonna change the background color to white. We'll save that. Take a look at the file and refresh and we see that that did work. Targeting the NAV Bar static top class did work. Sometimes, it might take a little experimentation, if you really want an easy way to figure it out, you can always right click on it if you're using Chrome and click on inspect. And then you could go to the nav here and you'll see there's three different classes applied to it and then, over here on the right where our styles are we can see where the colors are applied. Now, in Bootstrap, you'll see the background, the gray, the background color is applied to the navbar default. So we could have done that instead of the navbar static top and it would have just overridden it. Either way, you'll see that it works. But usually if you're having trouble overriding in particular Bootstrap style, it's very important to use this technique to inspect the element that you're looking at and see what rule that's applying to. Because sometimes the rules are more specific than just a single class name. Sometimes, the rules will point to a certain class that is the direct descendant of another class. And if that's the case, then you need to make sure that you use that same rule whenever you're overriding it. Because if you want to override something that already exists, then your CSS rule needs to be at least as specific as the CSS rule you're overriding. So we've got the background color now for our nav bar. The next thing I wanna do is change the height because you'll notice in our CSS file, if we zoom in, it's a little bit taller than what we're dealing with here. So I'm gonna jump back into our CSS, and we're going to change the height to a value of 100 pixels. And I'm also going to add some margin to the bottom so that it pushes the rest of the content down. So we're going to set our margin bottom property to a value of 40 pixels. And we'll do that, jump back into Chrome and refresh, and there we go. Now, we see it's a little taller. Now, we still have some work to do because all of our text now is aligned at the top and we want it vertically centered. You'll notice our buttons over here, they only take up a certain amount of height. They're not automatically taking up 100% of the height of the Nav bar, so we need to fix that. So the first thing I wanna tackle is our logo over here on the left which is taking up right now of the same height as the rest of our items. And if you remember, in our index.html file, if we find our logo right here, it has the nav bar brand class applied to it. And that is a Bootstrap specific class and we can override any styles on there. So let's jump into our site.css and let's override that. So we're gonna point to navbar-brand, and I'm gonna set its height to 100 pixels as well. I'm gonna set the align height since we know that this is just gonna be one line of text. So it's not gonna be one line on top of another, we're gonna set the line height to 100 pixels as well which will in affect vertically align it. And then, when we do that we're also going to need to remove the panic from the top. Cuz if we would just leave it like that and refresh, you'll see it's off center because there is some padding at the top of that button or at the top of that div. So we also need to set padding top to a value of zero and once we do that, we can see that it's now vertically aligned. Now, we can do the same thing for our navigation items over here if we inspect these and look at this anchor tag. We can see that it has some padding applied to it as well. So if we make these taller and change the line height, we're either going to have to get rid of the padding or set the line height to 100 like we just did. If we leave the padding there, which I think we might do, if we leave that padding there, then we just need to adjust that line height. So our total height is going to be 100 pixels and our padding top and bottom is 15 pixels each. So that's 30 total pixels we need to subtract which gives us 70 pixels leftovers. So we're gonna set our line height for these anchor tags to 70 pixels. And then, we won't have to mess with the parting for those buttons. So again, we need to make sure our rule is as specific as the rule that we're overwriting. And you can see here that we have several different rules that are applied to the anchor tag that's a direct child of a list item that is a direct child of the nav class or the nav bar nav class. So we're gonna override that. Let's jump into our CSS. And let me just skip a couple of lines. And we're gonna point to Navbar Nav. And then, we're gonna use the greater than sign to indicate that we're looking at the direct child of the Navbar Nav class. We're gonna look at the list item within that. We're gonna look at an anchor tag within that list item. So here, we're gonna set our line height to 70 pixels. And in order to match up with our Photoshop file, we're also gonna set the font weight here for these items to bold. So we can refresh, and there we go. Now, you'll notice that our buttons have a grey background on them. And we don't want that for this particular design. So what I'm gonna do is I'm going to copy a couple of rules here, cuz it's a lot to type out. We're gonna paste it here. And here, we're pointing to the navbar default class. Inside that, then you have bar-nav, and here you realize we're pointing to li.active, because it's the active object that has the grayed background on it, as we can see here. And that, if we look in our code, we have a list item here with a class of active. So that's what this is pointing to. It's pointing to the active list item in the anchor tag within that active list item and we're giving it a background color of transparent. And we're also gonna do the same thing whenever we're hovering over it. We're gonna make sure that background cover, background color excuse me, stays transparent. So let's save that. And refresh and there we go, now that background color is gone. Now, the next thing I wanna do, and this is kind of the trickiest part here, is I want to tackle this blue bottom border under the active link. So right now, our active link just has darker text. But I wanna add that small blue border here. And since it has a different width, we can't just set it as a border. Instead, I'm gonna use the after pseudo class for our active link. And I'm going to basically just create a little rectangle with a blue background on it. So let's take a look at how we're gonna do that. And this rule's gonna be very similar to this one here, instead of colon hover, we're gonna have colon after. So let's copy that, paste it, and we'll change hover to after. So rascally, we're just creating a little Fake element that comes after but inside that anchor tag. So we're gonna set its content. This is the easiest part to forget. We're just gonna set its content to an empty string, so we just have two single quotes there. And then what we need to do, we need to position it at the very bottom of our link. So I'm gonna use absolute positioning to do that. Now, if I just set the positioning to absolute and set the bottom value to zero, it will jump down to the bottom of the website or the web page. We don't want it to do that. We want it to jump to the bottom of its parent element. So we need to set the parent elements position to relative. If the parent item has a position of relative, then anything inside that parent element that has a position of absolute will be absolutely positioned within that element instead of within the entire page. So we need to go back to the parent element which is this anchor tag here. And let's go ahead and do it for all anchor tags cuz it doesn't really matter either way. We're just gonna set the position here to a value of relative. And then down here, we're gonna set this, after pseudo class, we're gonna set its position to absolute. Now, we can position it wherever we want to within that particular list item. Now, before I set the positioning, I wanna set the width and height here so we're gonna do that first. So I'm gonna set the width to 40 pixels, and it's not gonna be very tall, I'm gonna set the height here to 3 pixels, and then I'm gonna set up a background color to a value of 00990ff. It's same blue shade we have been using. Okay, we got our width and height, we have got background color. So this defines the dimensions and color of that rectangle now we need to position it. I'm gonna position it at the bottom of our link. So I'm gonna set the bottom value to zero. So that will bring it down to the very bottom and then I'm gonna set the left value to 50%. Now, that's not gonna quite get us where we want but let me go ahead and view the results of that. I'm gonna refresh and what you'll see is that the left edge of the that rectangle is at 50%. So the left edge is half across that button. So now, what we wanna do is we wanna shift this to the left by half of its width, and that will get it centered under the welcome text. And so its width is 40 pixels, so we just need to nudge it to the left by negative 20 pixels, so we're gonna use a margin left value for that. So we have bottom left and then, I'm gonna be a margin left. And again, I'm gonna give that a value of negative 20 pixels and hopefully, that will move it into place and it does. So now, what ever list item we apply that active class to, if we were to just jump in here in our browser, and just add a class of active to another one, you'll see that it will add that bar to the bottom. So as you're navigating through the different pages, you'll just assign the active class to whichever page you're on. Let me refresh that so that that extra rectangle goes away. And that wraps it up for our navigation bar. Thank you for watching, and I will see you in the next lesson.