4.8 CSS: Page Header
In this lesson we'll show you how to style the page header.
1.Introduction1 lesson, 01:35
2.From Beginner to Pro7 lessons, 38:33
3.Creating a PSD Design4 lessons, 35:36
4.Rewriting the Code14 lessons, 1:42:32
5.Conclusion1 lesson, 00:57
4.8 CSS: Page Header
Hey, welcome back. So this is what I have so far, in terms of styling. I pretty much covered all of the general Styling. And now it's time to target more specific areas. And a very good place to start is at the top with the Header. So the header [SOUND] contains the logo and the navigation. And it has this dark, semi transparent background. So first of all lets create the proper less file. So I'm gonna say import header.less. Create the file. Save styles.less again. And we're good to go. So the header starts with a class of main header. Let's add that background color. I'm gonna use rgba because I need some transparency. So, that's black and with a 80% opacity, so, .8. And there it is. Okay. Let's add some padding on the top and the bottom. And the padding is actually one baseline. So one row. Top and bottom. Padding, baseline, top bottom, zero on the sides. Now, I'm gonna do something different this time. I'm gonna set position to fixed. That means my header will stay there even if I scroll. And it's gonna stay on top of all the other elements. Now, I will add a width of 100%. And, notice these elements below it are kind of moving on top of it. And that's because they have wrong z index. So, I'm gonna set the z index for my header to a very high value. Something like this. So now I make sure my header is above everything else. Now my logo doesn't need any styling, but my navigation does. So the navigation uses the class of main nav, which has a UL with some links. May nav, I'm gonna start by floating it to the right. Like this. And then I'm gonna target the ul, remove these bullet points. So list-style-type set to none. Now they're gone. And next select each list item. And I'm gonna say display inline. So now my list items are on the same line. And also I need some distance between each one. And since these are aligned on the right side, I'm gonna apply some margin on the left side of each item. So I'm gonna say margin-left baseline. So 27 pixels. And this is the result. Now the navigation items look a bit different. So they are white, uppercase, bold, 14 pixels, and also they have a bit of letter spacing. So Anchor Tag. I'll start with the color, which is white. And then, font size, which is 14 pixels. They were also bold. They also had some letter spacing, about 2 pixels. Okay. They were also uppercase, so, text transform uppercase. And, yeah, that's basically it. Now let's add a Hover State. So, Hover. I'm gonna set the color to color-link. So when I hover I get that orange color. And also remove the underline. So text-decoration, set to none. Now, all I need to do is align these in the middle of this, of this header. And the easiest way to do that, is to set the line height to the proper value. In my case, it's gonna be. Let me show you here. It's gonna be the baseline times two. So if I do this, my menu items will be aligned in the center of what I've just selected. So right here I'm gonna say, line height, baseline times two. And there we go. Now they are perfectly aligned with the logo. So that's it for the Header. As you can see fixed position it works perfectly. Now next time it's the Slider. We've got a bit more work to do there. So I'll see you in the next lesson.