9.9 Fixed header - Video Tutorials & Practice Problems

<v Michael>In this section,</v> we'll look at another application of positioning. In particular, we're going to implement this common design pattern that's emerged in the last few years on the web which is to have a fixed header. And this is for a particular purpose that, you know, reflects our design choice. It's not the kind of thing that you always have to do but why might you wanna fix the header, Lee? <v Lee>I mean, one reason to do it</v> is so that your navigational elements, your menu is always visible to your users. So no matter how far they scroll down the page, they would always be able to <v ->They don't disappear.</v> <v Lee>Yeah. Click to get back to home.</v> Or another page. <v Michael>Right.</v> <v Lee>A lot of sites have been doing this recently.</v> A lot of them have also been... A lot of sites have also used JavaScript, so that as you scroll down the page, it makes the header a little bit smaller. So it's not taking up as much space. <v Michael>Okay.</v> <v ->But just as many use</v> the full-size header. <v Michael>Yeah. All right.</v> Well, how do we do that with CSS? <v Lee>Well, amazingly it's easy.</v> <v Michael>Really? (chuckles)</v> That's surprising giving how many things are hard. <v Lee>Yeah. So.</v> <v Michael>Okay. Let's take a look</v> at the header here, the header styles. <v Lee>And I just now remembered why the width was in.</v> <v Michael>Okay.</v> <v Lee>But we'll get there.</v> <v Michael>Okay.</v> So position fixed. <v Michael>Yes.</v> <v Lee>Just add it.</v> (keyboard tapping) <v Michael>Okay.</v> <v Lee>And now save it and let's see what happens?</v> <v Michael>All right.</v> (mouse click) Uh-oh <v Lee>So.</v> <v Michael>Uh-huh.</v> <v Lee>Let's scroll down</v> the page. <v Michael>Yeah. Ah, it is fixed.</v> <v Lee>It is fixed.</v> <v Michael>It looks terrible, but it's fixed.</v> <v Lee>It looks not so good.</v> <v Michael>Yeah.</v> And you can see why, I remembered why the the width 100 was there now. <v Michael>Yeah.</v> <v Lee>Yeah. So I was pre-adding that, but</v> <v Michael>Right.</v> <v Lee>Now, if we add</v> width 100 it'll go back to being the size of the page. <v Michael>So with 100%, and then, there we go.</v> <v Lee>Much better.</v> <v Michael>I noticed that, yeah.</v> When you scroll, look at that it just goes right underneath it. That's cool. All right. The width is working now, but we've been fiddling around with this and we actually just discovered something strange. Let me show you I'm gonna make a new Safari window with a different size. (mouse clicking) And you can see if we move this around that the logo is being scaled in a weird way. It's like being squished. And this is not expected behavior. And we tested it. <v Lee>It's not expected behavior</v> because we're only defining a dimension for it on the height. So the way that's supposed to work is that the width would just automatically be the correct proportional size to that. And when we looked at it in Chrome, it does things correctly. <v Michael>Right? So Chrome is right</v> to here. And so that means that there's possibly a recently introduced bug in Safari. So this is the kind of thing that the only thing we have to say is welcome to web development and design. This is the kind of thing that happens. <v Lee>Yeah. Sometimes between-</v> <v Michael>Fix for it.</v> <v Lee>Between initially creating the sample site,</v> and now Safari has a weird thing that's affecting this for some reason. <v Michael>Yeah. So, let's go back</v> to our CSS and we can fix this. Where's the 80%? Here it is. We can say height, 80%. And width, auto. (keyboard tapping) <v Lee>Like Michael said, welcome to web development.</v> <v Michael>Yeah. (chuckles)</v> Now I noticed that there's another element here. Another aspect of the header CSS but there's also a z-index. <v Lee>Right. So.</v> <v Michael>What does that do?</v> <v Lee>The z-index here is a bit of</v> defensive programming as well. <v Michael>Okay.</v> <v Lee>To make sure that if something else</v> is absolutely positioned, that comes later in the tutorial, that it won't show up on top of the header. <v Michael>Okay.</v> <v lee>So right now,</v> when you're scrolling through everything is nicely in the flow of content here. But if we were to change the position on something else, (mouse clicking) that's not always the case. <v Michael>Oh.</v> <v Lee>So, something that is</v> <v ->Oh, I see it. Yeah.</v> <v Lee>positioned to absolute</v> like this so it's taken out of the flow of the page. <v Michael>Yeah.</v> <v Lee>And it comes later,</v> like down the HTML file. It will naturally be given a higher z-index. So that means that- <v Michael>Got it.</v> <v Lee>It'll be drawn on top of other elements.</v> <v Michael>Okay. So if we make the z-index something high</v> here so say I, did you just pick the number 20 'cause it's- <v Lee>I just picked the number 20 a lot of times,</v> and this is one of those stylistic things that you're gonna see in CSS. A lot of people pick crazy numbers like 9,999. (Michael chuckles) But I feel like you start to get really lost with all your z-indexes at that point. And then, if you ever wanted something to be on top of the header, you now need like, 10,500 and whatever. (Michael laughs) So I just pick like a reasonable thing, like 20. (Lee chuckles) <v Michael>Yeah. So.</v> <v Lee>And then work around that.</v> <v Michael>So if I refresh this now it's got that z-index</v> now we have to put back and- <v Lee>We have to-</v> Yeah, we have to put the <v ->do the Inspect trick again.</v> <v Lee>Yeah.</v> So, just to illustrate this. (mouse clicking) Right. So, now when we scroll up. Oop. <v Lee>It's all underneath.</v> <v Michael>It's nice. Yeah.</v> Great. All right. Well there's one little design element left that we wanna add. That's not directly related to positioning but it's a nice little touch, which is to add a border in the form of a box shadow around the full site. <v Lee>Yep. And since we just,</v> kind of, finished up our header and this is- <v Michael>Yeah.</v> <v Lee>In some way,</v> connected to the header, we'll do this right here. So. <v Michael>Right. So.</v> <v Lee>We're gonna put an inset box shadow</v> and this is gonna be a totally new style. All right. And a totally new- <v Michael>It's gonna be on</v> the HTML tag itself. <v Lee>Right.</v> And it's gonna be a totally new CSS property as well. You haven't seen this before. <v Michael>Okay. Yeah. I haven't seen this before.</v> So, well, there's a padding. Let's see what that looks like by itself. 'Cause I kind of know what a padding is. So this is top. So this is a top and bottom of zero and left and right of 30. <v Michael>Mm-hmm.</v> <v Lee>Doesn't have a color.</v> Okay. So there is some padding there <v Michael>Mm-hmm.</v> <v Lee>Here.</v> <v Michael>Why isn't there padding on this side too?</v> <v Lee>So the header is being nudged over.</v> <v Michael>Okay.</v> All right. And 'cause I'm not entirely clear on that still. Oh, I see there's padding on this side here. There's padding on the other side too, but I just can't <v Lee>Yeah. No, you can see it.</v> It's, look at the blue of the hero. <v Michael>Oh, oh. You're right.</v> Like right here. <v Lee>Yeah.</v> <v ->So it's just the content of the header</v> because it's set to width 100. <v Michael>Oh, I got it.</v> <v Lee>And because it's fixed position</v> it's still trying to be 100% of the entire page, <v Michael>Oh, I got it.</v> <v Lee>which is now</v> getting pushed in by 30 pixels on the left. <v Michael>Yeah.</v> <v Lee>So, we're actually</v> gonna use a little margin trick to get that back, but... <v Michael>Okay.</v> So this is box shadow and then this has got a bunch of values. So is this also top, right, bottom, left. <v Lee>Mm-hmm.</v> <v Michael>So it's gonna be zero, zero, zero</v> And then you've got 30 pixels. <v Lee>Well, no, I'm sorry. That's not,</v> <v Michael>Is that right?</v> <v Lee>Top, bottom, left, and right.</v> Sorry. You had me confused there for a second. So. <v Michael>Yeah.</v> <v Lee>The box shadow is a more complicated compound style.</v> And so the first value is how far in you want it? <v Michael>Oh, I see it.</v> <v Lee>On the x-axis.</v> <v ->These are not like the margin</v> <v ->No</v> <v ->and padding.</v> <v Lee>So the first one is</v> x-axis, <v ->It's x-axis, y-axis</v> <v Lee>y-axis</v> This one is the blurriness of it. <v Michael>Okay.</v> <v Lee>Whether or not,</v> you want it to be like a soft shadow or a hard shadow. And then, <v Michael>Right.</v> <v Lee>this is the size of the shadow.</v> <v Michael>Got it.</v> <v Lee>So.</v> <v Michael>And then the color?</v> <v Lee>Right. So actually, let's do a little example one</v> that this is a bonus for people that will be watching this. Comment that out. <v Michael>Yeah.</v> Comment it out? <v Lee>Mm-hmm.</v> And then on the hero. <v Michael>Yeah.</v> <v Lee>That'll be a good place to do it.</v> 'Cause we can see it right now. So we'll do box shadow. (keyboard tapping) And do 10 pixels, 10 pixels, 10 pixels. <v Michael>Just like that?</v> <v Lee>Yeah.</v> <v Michael>Again.</v> <v Lee>Yep.</v> And then zero and then hex color, zero <v Michael>Like that?</v> <v Lee>Yep.</v> And then when we refresh. <v Michael>All right.</v> <v Lee>There you go.</v> <v Michael>Ooh, look at that.</v> <v Lee>So, what happened was that first 10 pixels</v> for the x-axis moved it 10 pixels to the right. Then it moved it 10 pixels down for the y-axis. Then it blurred it for 10 pixels <v Michael>Mm-hmm.</v> <v Lee>And then it's black.</v> So if you go back to the code, we could actually make this if we moved or if we made the first 10 pixels, negative 10 pixels it would actually move the whole thing to the left. <v Michael>Right. Ah, yeah.</v> Look at that. <v Lee>Yep.</v> <v Michael>Now it's on the other side.</v> <v Lee>And now, this is an interesting thing.</v> If you want a shadow all the way around. <v Michael>Yeah.</v> <v Lee>You can set both</v> the x and y to zero. <v Michael>Like this.</v> <v Lee>And because we have 10 pixels of blurriness.</v> <v Michael>Huh.</v> <v Lee>So, there's 10 pixels</v> of blurriness there. That next, <v Michael>Yeah.</v> <v Lee>That last value the size.</v> If you add 10 pixels there, this is... <v Michael>This one?</v> <v Lee>This will push it out</v> by 10 pixels and then do the 10 pixels of blur. <v Michael>Ah, look at that.</v> <v Lee>So you have even more. And, of course,</v> <v Michael>Cool.</v> <v Lee>box shadow can accept</v> RGB values. So if we wanted that to be much lighter. <v Michael>Right.</v> <v Lee>We could do RGBA zero, zero, zero.</v> <v Michael>So, A..</v> Oh, RGB. Oh, I understand. RGBA with the Alpha. Got it. <v Lee>And I did that for you. I add that the spaces.</v> <v Michael>Thank you.</v> <v Lee>You're welcome.</v> (Michael laughing) <v Lee>All right. So if we do that,</v> we'll have a lighter shadow <v Michael>Right. Yeah.</v> It's really subtle. <v Lee>Yeah. And now</v> if we go back, <v Michael>Yeah.</v> <v Lee>let's make that shadow dark again,</v> like change it to .9. And there's one last thing that you can add to this which is instead of being outside of the box, you can make it inside the box. <v Michael>Okay.</v> <v Lee>So, that's inset,</v> And so now when you go back <v Michael>Yeah. Okay.</v> <v Lee>It doesn't-</v> <v Michael>And we're gonna</v> use that. <v Lee>That's the version that we're gonna use to draw</v> a sharp-edged black border around the entire site. <v Michael>Got it.</v> <v Lee>So, if we go back</v> <v Michael>So, let's just-</v> <v Lee>to the code,</v> we'll delete this one. <v Michael>Let's grab this.</v> I'm gonna cut that and go back to the HTML right here. Let's paste it in. And so you can see, instead of 10, we'll have zero here. <v Lee>Mm-hmm.</v> <v Michael>And the 30, so that's the blur.</v> <v Lee>Oh, no. The blur is zero.</v> The 30 is the size. <v Michael>That's what I'm saying. I'm sorry.</v> Yeah. So, like, I mean, this one is the blur. <v Lee>Yeah.</v> <v Michael>Its here the zero.</v> And then, there right then the 30 is the size. <v Lee>And then-</v> <v Michael>No that's fine.</v> <v Lee>We'll also change it from RGBA to just solid black.</v> <v Michael>And make it black</v> and inset. <v Lee>Mm-hmm.</v> <v Michael>So, let's do this and see,</v> it should be all around the edge. Look at that. <v Lee>So now if you scroll all the way</v> down to the bottom of the page, it follows all the way down to the bottom of the page. There's actually a little bit of bleed through from that text. That's there, but we'll get that. <v Michael>Great.</v> <v Lee>So let's fix the header issue though.</v> So you can kind of see right now that our logo if you hover on it. <v Michael>Yeah.</v> <v Lee>Is not in the corner.</v> <v Michael>Yeah. We'd like it over here.</v> <v Lee>Yep. And because we positioned it relative,</v> we can actually give it a left negative 30. <v Michael>Right.</v> <v Lee>Which will move it out</v> of its natural position and into the top left corner, fully. <v Michael>So that's the header logo, which is down here.</v> So there's, it's gonna be after height. We're gonna have a left <v Lee>Mm-hmm.</v> <v Michael>of negative 30 pixels.</v> That's because of the 30 here, right. <v Lee>Mm-hmm.</v> <v Michael>In the box shadow.</v> Is it this or is it, are they're the same? <v Lee>It's because of the padding.</v> So the box shadow itself. <v Michael>Okay.</v> <v Lee>Actually doesn't do anything.</v> So if we didn't have the padding there. <v Michael>Yeah, sure. Zero.</v> <v Lee>If you just get rid of that.</v> It doesn't move content. <v Michael>Oh, yeah.</v> <v Lee>Whereas when you put padding there</v> <v Michael>Right.</v> <v Lee>Now all the content</v> is moved in. <v Michael>Right?</v> <v Lee>Yeah. The box shadow is purely a graphical style.</v> <v Michael>Got it. And so when I saved there, right,</v> we actually got the negative 30 into now, it's- <v Lee>Yep.</v> <v Michael>It's there</v> in the right spot. <v Lee>Exactly.</v> <v Michael>Cool.</v>