Navbar Layout

[00:00:00]
>> We are starting then from my name, which is the most important thing here on this page, and we have our series of links that come after this. So let's start styling all of this wonderful stuff. So let's start by setting up our layer @ layer nav. And so this is of course, where our navigation styles are going to go.

[00:00:23]
And then the first thing that I wanna do is I have here with nav, these styles here, this is all Lato, right our inherited style that comes from the body. And if we take a look at my webpage, should have left it open, We'll take a look at my webpage, this font here is not lato.

[00:00:49]
This is Josefin Sans, so we're gonna have to change our text here to match that. So, I am just going to use my nav element here, right here on the page and just say nav. And I'm going to say my font family is what. What comes next for my font family?

[00:01:13]
>> Var.
>> Var, yep. And headline is the name of that particular variable. And I'd also like these all to be bold. So I am going to set those up with font-weight of 600. Okay, and it looks like it made it bold but it doesn't look like Josefin Sans got applied.

[00:01:43]
Heading, did I call it the right thing? So everybody makes mistakes. So I've called my variable here, I called it headline. And in my declaration up here on the top, it's actually a heading. So if you call your variable by the wrong thing in the computer, just ignores you.

[00:02:01]
So, it happens to everybody. You can just fix your errors as you go. So this is heading. Heading, there we go, that's better, okay. Then for the ul of course with all these to find bullets here, we don't actually want any of those bullets. We can get rid of those.

[00:02:25]
So nav ul. I'm gonna turn off the margin, margin 0. I'm gonna turn off the padding 0. And I'm going to say list-style-type of none. And so that should show all of your links all the way to the left edge of the page here because we've removed the padding and the margin and we have removed the bullets as well, okay.

[00:02:57]
And then the next thing we can say is nav a, for all those individual links, text-decoration, none. We don't want any underlines on our navigation items. All right, how are people feeling so far? Straightforward enough? Okay, great. What if we make this go horizontal instead of vertical? Wouldn't that be fun?

[00:03:23]
That would be amazing. And what kind of technique white we use to make this go vertically across the page and why?
>> Flexbox.
>> Flexbox I think that's a great choice. Why would you choose Flexbox?
>> Because you don't really need to you do any changes to the markup?

[00:03:42]
>> A fair point. You don't necessarily have to make any changes to the markup but that would actually be true for Grid as well. Grid uses the same kind of markup. Flexbox is great to use when you have a series of items of all different widths but the spacing between them matters, okay?

[00:04:03]
So if you think about it, a nav bar is a perfect example of this. We have a bunch of items that are all different widths. We don't actually wanna make them the same width because then it's gonna look weird, right? The space in between is the most important part here, that that is the same.

[00:04:18]
But the nav item names, they are as long as they are. Okay. So to set that up then, here on our nav ul, we are gonna apply these styles. Because remember, Flexbox has a relationship between parents and children. So if the lis are individual children here, those are going to be the actual links that we're gonna see going across horizontally.

[00:04:43]
We want their parent to be where we declare flex and that would be the ul. So we can do that here, more about this in the Grid and Flexbox course. So we are going to declare display flex And we're going to say flex-flow row wrap, okay? So that's gonna put it in a row and they're adding the wrap to it means that, I don't know if I can get this window small enough, you all can see that this is wrapping on to another line, yeah, instead of just scrolling off the screen.

[00:05:27]
So that's what we're doing here, telling it to go in a row, and we want them to wrap if it gets too long, and then we're going to say gap of 2rem. So that's gonna give us spacing between our links to 2rem is about 32 pixels. Remember that the selection space for fingers is something like 40 pixels or 44 pixels.

[00:05:52]
So we wanna be sure to have enough space for somebody's fat fingers clicking through on these links in addition to mouse people, right? So that's probably a reasonable separation there. So now what we have is we have our name and then we have a nav bar after it.

[00:06:10]
Now if you like that layout you can keep it. But what we are trying to do is put the name over here on the left-hand side, and we're trying to put the nav bar over here on the right-hand side. So, to set that up, what we're going to do is take a look again at what we have here for our structure in our HTML.

[00:06:33]
So we have a header, the header has two children, the header has an h1 and it has a nav bar that's actually perfect. If we use Flexbox, we can shove that name to the far left, and we can shove the nav bar to the far right, using the property of space between in Flexbox.

[00:06:55]
So let's set that up as well. And I'm gonna put it up here at the top after nav. I'm going to call this just header, display flex, flex-flow, row wrap. And then justify-content space-between, And assuming we get the screen big enough, there we go. Make sure your screen bit's big enough you should wind up with these two elements next to each other.

[00:07:42]
Everybody happy? No, I can't imagine why. What's going on here? Kind of wacky looking, isn't it? Okay, so what did I tell you to do when it looks wacky and you're not sure what to do next? Stick a border on it, right? So let's stick a border on it.

[00:08:02]
Border 2px solid red. We'll put that on the header. That's our big header there. Let's put one on the nav. Border, 2px dotted blue, okay? So there's the navigation over there. And then let's go to our h1 and we can say border, 2px dashed green. Okay, so can anybody kinda describe what's going on here?

[00:08:42]
I imagine that this is fairly subtle at this moment in time. So if you take a look at the h1 there, remember the border is going to be the divider between the padding and the margin, right? And we have a lot of space between the border and the red line which is our header.

[00:09:05]
So what is that space? Is it padding or is it margin?
>> Margin?
>> It's margin on the h1, okay? So all of our headings, remember, had a bit of margin that went with them. They also had a line height. So something we might wanna do here is try setting our margin to zero.

[00:09:28]
That definitely helps some. See how we debug that. Okay, so that got that out of there. And then the other thing that we might wanna do is, think about, remember Flexbox lets us lay things out in rows, right? So horizontally, but Flexbox also lets us adjust things up and down vertically.

[00:09:50]
And by default, it's displaying there at the top of that particular line. We would actually like this to go down a little bit further, right? Probably something more like a baseline. We can align the items to the baseline, and we are going to do that right here on the header.

[00:10:06]
Align-items baseline. Okay, so that's gonna squash things on down there. And it'll line things up a little bit better with what's going on with the name, okay? Now the alignment there is close, it's probably not a 100% perfect at this point in time. I'm not gonna worry about that particular issue right now.

[00:10:30]
And the reason why is because the h1 is still too big, we need to add some icons here to this nav bar. There's some other changes we need to make. So I'm not gonna worry about a lot of fine adjustments yet. We may iterate back to that in a little while.