Check out a free preview of the full Introduction to Gatsby course:
The "Creating & Styling the Header" Lesson is part of the full, Introduction to Gatsby course featured in this preview video. Here's what you'd learn in this lesson:

Jason creates and styles the header component for the site along with navigation links that signal the current page.

Get Unlimited Access Now

Transcript from the "Creating & Styling the Header" Lesson

[00:00:00]
>> Jason Lengstorf: I think we're ready to build ourselves a header, so we're gonna create a new file for this cuz it's got a little bit going on. So we can just go ahead and hop into our components folder and create a new file, we're gonna call this header.js.
>> Jason Lengstorf: And we're gonna do another react component, so let's import react from react.

[00:00:21] And this time, we're gonna use a styled component, so we're gonna import styled from emotion/styled.
>> Jason Lengstorf: And we're also gonna use the CSS props, so I'm gonna important CSS from the emotion/core.
>> Jason Lengstorf: And let's also import link because we're gonna be linking between our home and about pages in the nav bar, so we're gonna import that from gatsby.

[00:00:49] And then to start, we will do our header, so the const header is going to just be,
>> Jason Lengstorf: A header element like we saw it here. And this one is going to take some links. And so the first link that we wanna do, if we just kinda comment this out, we wanna do like a site name.

[00:01:22] Like the where we are, kind of the branding for the site, and then we wanna add navigation. And so to do that we need nav links, but we wanna style these links and I don't necessarily want to apply a CSS prompt to every one of them. Which means, we wanna use what's called a styled component.

[00:01:43] So I'm gonna create something called nav link, and this is gonna be a styled link. And so in doing this, I'm basically saying like, I wanna use this component, but I wanna apply styles to it. And I can do that by let's say, I want to set the color, so I don't want it to be standard link color, I want it to be like the triple 2s.

[00:02:06] I want the font size to be the default font size, we want the font-weight to be, let's say, normal.
>> Jason Lengstorf: And we want the line height to be 1 because this doesn't occupy any more vertical space than it needs to. We don't want these to be stuck right on each other so we're gonna give them a little horizontal breathing room.

[00:02:32] But only on the right so that we'll have to override this a little bit later on. And so that it's easier to click, we're gonna add a little bit of padding to make the click area bigger. And we're gonna remove the underline. So in doing that, now I can come down here and I can say, let's do a NavLink for Home.

[00:03:01]
>> Jason Lengstorf: And this is going to be a link to the home page. And let's tell everybody what we're doing. We're doing a Frontend Masters workshop. And so I, before we go any further, let's actually get this showing on the screen so we can see our work and mess with it.

[00:03:19] We're gonna default export to header. Once we've exported the header, I'm gonna come back over here and I'm gonna import it. Let me collapse this so we can see what we're doing. So I'm gonna import the header from header, and then I’m just gonna drop it in right here instead.

[00:03:41] And so now, you can see, we’ve got our workshop is right at the top. And so, this is good, we’re getting closer. Let’s style up this header a little bit more and to do that, we're gonna use the CSS prompt.
>> Jason Lengstorf: And I'm gonna use, let's do like a light colored background.

[00:04:08] And so I can save each of these steps as I go. Now we can see we've got our light colored background there. Let's add a border bottom to really set it off. So we'll do a one pixel solid border of triple D. That'll give us just a little bit of definition down here.

[00:04:26] Then I'm gonna make it display flex and the reason for that is that I want to put the header on the left and the text on the right, or the links on the right. Actually, lets hold off on that, I'm gonna leave that out for now. And lets build the nav so we can see how this actually affects it.

[00:04:46] So we're going to use a nav component. And this nav component is going to get a CSS prompt, because we just wanna remove that top margin. I'm gonna let prettier do the work for me here. So I'm just gonna say the margin top is zero. And when I save this, it is going to fix all of those things for me.

[00:05:07] So I'm gonna add a nav link to the home page and,
>> Jason Lengstorf: That's what I want and I can say, home. And then I'm gonna add one more to the about. And we'll say, about and now when I save these, you can see we've got kind of some stacking, it's not ideal.

[00:05:35] So let's turn this display flex on. Okay, so that's better but still not great. So to fix that, let's do a justify content and we'll set space between.
>> Jason Lengstorf: Okay, now we're getting there, we're cooking with gas. And finally, we'll set a little bit of padding here. So I want this to have some vertical padding.

[00:06:06] And then we're gonna do some CSS wizardry, copyright Harry Roberts. This is a little bit of Math in CSS which is super fun. So what I want is, I don't want to add a rapper div around my header. So instead, I need to find a way to set my width to be either 90 vertical width or the 550.

[00:06:39] Which means that we've gonna do some math. I'm gonna do a 100 vertical width, minus 550 pixels so a 100% of the screen minus 550% of the screen. And then I'm gonna divide that by 2. And so this now, gives us half the padding we need so that it stays the right whip.

[00:07:05] Neat, right? [LAUGH] And that's the end of the workshop you've learned the most important thing you needed to know today. So what's cool about this is, it gives us the ability to kind of set this stuff up and not have to add a bunch of extra markup into the DOM.

[00:07:24] I really enjoyed that and wanted to kind of share. So a couple things are left to do here. We don't know which page we're on. So as I click, I can't see what's going on. And I wanna be able to see that, right? So we need to be able to set what things are and like what they're doing.

[00:07:45] So I'm going to up here. I want a way to say that something is the current page. And so if you've used SAS or any other kind of nested CSS, you might have seen this before. This Ampersand means like this element and then I'm adding a class to it.

[00:08:02] So when this element has the class current page applied do extra things. And the extra thing that I'm gonna do is I'm going to set a border bottom of two pixels solid and we'll use the triple two for that. And then that means that down here, I have to tell it how to be, how to use that class.

[00:08:22] So I’m going to set a prop down here. And this is a prop that Gatsby just accepts. So when it’s active, you can set an active class name. And we're gonna set that to be current page.
>> Jason Lengstorf: Okay, so now we can see, hey, that's cool. That's what we wanted.

[00:08:47] And then I'm also wanting to set
>> Jason Lengstorf: One of these to bold, and so I want the home link to be bold, but I don't necessarily wanna just add a CSS prop to this. So we're gonna use something pretty cool that CSS and JS allow us to do, which is using props to determine styles.

[00:09:12] So I'm going to set a prop down here, of font-weight.
>> Jason Lengstorf: And I'm gonna set that to bold. But, what I want to do, is up here, so that's not just gonna work, but what I can do is up here, I can look at the
>> Jason Lengstorf: At the props, and so I can just create a template string and add in a little function.

[00:09:36] So I'm gonna look at my props. And then I'm either going to use the props.fontweight, or I'm gonna send back normal. And what's really cool about that is that it allows us to kind of configure our components, to be a little more flexible. So I'm basically saying like, do it bold when I tell you to otherwise, default to normal.

[00:10:03] And if I wanted to set it to be a really light font weight or something, I could do that as well. But so this is a, that's a pretty powerful way to do that. And with that being said, I believe we are pretty much ready to rock on this.

[00:10:17] Let's see if I, yeah I think we're in pretty good shape here. We've got ourselves a header, that header is consistent across the pages. Looks like I've got a couple little margin issues that I guess I can deal with. Let's deal with those. And so the way that we would do this is we would just subtract that padding width.

[00:10:53]
>> Jason Lengstorf: And now that you can see, pulled it back just enough to make that work. And then over here, we've got straight margin, so I'm also going to add a last child or I think last of type. So we're gonna use the selector and we'll do last of type and we'll set the margin-right to 0.

[00:11:21] And that way-
>> Student: You got a typo. It says last of type.
>> Jason Lengstorf: Laste, last of type.
>> Jason Lengstorf: There we go. So now, that margin is gone, so that when we do have text that runs the full width, you can see that the right edge of these blocks lines up with the right edge of the item.

[00:11:43] So that's what we want. We're in good shape here. With that, we are done with styles for now. This is kind of, gonna be the global style sheet that we'll stick to for everything else that we do. If you are wanting to jump ahead, you can check out Step One, Styles, and you'll be where we just ended.

[00:12:07] So next, we're going to dive into graph ql, and we're gonna build some content from data as opposed to just hard coding things.