Navbar with Flexbox

[00:00:00]
>> Now that you have a little bit of background in Flexbox, we are going to move on to looking at nav bars in a little bit more detail. Because this is one of the places that we're gonna use flexbox very frequently for laying out a webpage. We are gonna put all the focus on the flexbox and layout here with this particular navbar.

[00:00:19]
We are not going to spend time going all the way down to mobile dimensions. In other courses here at Frontend Masters, you'll find me talking through how to set up a hamburger button, both with JavaScript powering that hamburger button, and without JavaScript powering that hamburger button, in other words, a CSS-only hamburger button.

[00:00:37]
So all of those answers are somewhere in the Frontend Masters library. Today we're just gonna focus on doing different kinds of layouts with flexbox. As always, the best place to start here with our particular navbar example. And you can get the link for this CodePen from the course website, this is the beginning CodePen.

[00:00:55]
Take a look at your HTML structure that we have here. So this is the way navbar should be marked up. And to talk you through what all these elements are, first of all, the main navigation for the webpage should always be marked up with the nav element. It goes above it and closes just after all of that.

[00:01:17]
That is very important for accessibility purposes, very important for screen readers. So make sure that you mark your navigation up with that nav element. Inside of that nav element, you're going to include an unordered list. And that's because we have a list of links, and that's the best way to mark up a list of anything that goes in any particular order.

[00:01:38]
Your marketing department's gonna want the links to appear in a very specific order. But you can visit them in any order, so it is an unordered list. As you can see for the bottom four links there, we have some kind of a href, some kind of link that's gonna go somewhere.

[00:01:56]
I'm not too concerned about where they're going, so there's actually no URL. And there are the names of those particular links. The very first item is a little bit different, and that is because it is the logo itself. This particular logo is a link, it's going around. The logo is an SVG, and I'm including it inside of the navbar, why would I do that?

[00:02:22]
Well, first of all, it links to the home page, so it is kind of part of the navigation list. The other part is, when it is part of your navigation bar like this, there are some cool flexbox tricks that we can do in terms of laying out navbars with that.

[00:02:38]
You'll find that some people take the logo and they'll break it out and put it as a separate element, separate from the rest of the navbar, that is okay to do as well. Just sort of depends on what you are trying to do in terms of styling that header of your webpage, okay?

[00:02:53]
So let's get started here, writing your CSS. And the first thing that I wanna do is make a quick little change here to my logo. Right now, my logo is set to a max-width of 400 pixels, okay? And of course, that will shrink down to nothing. But it is an SVG, so we're going to assign it just a width for now.

[00:03:16]
So I'm just gonna take the max off in front of width and just set this up as a 400 pixel logo. Then the next thing to do is to start styling our navbar. So we are going to start with looking at our HTML. And where would our parents and children of interest be?

[00:03:38]
So what would wind up being our navigation children on the webpage?
>> nav ul?
>> The ul, so it's gonna be one giant thing.
>> So the nav-
>> The individual clickable elements, what are those going to be?
>> Yeah, those are the links.
>> The li's, right?

[00:04:02]
Yeah, the li's, each one of those is gonna be one of our elements, what is its parent?
>> The nav.
>> The ul, right? So that is gonna be our parent, and the li's are going to be the children. That's always what we have to identify as we start writing flexbox and grid.

[00:04:20]
So now that we know that that's in place, we can start writing some styling. So I'm gonna say nav ul, and what are the three things that I need to put here? Anytime I'm working with an unordered list and I don't want to show my bullets?
>> list-style-type: none?

[00:04:37]
>> list-style-type of none, yep, and?
>> 0 padding and 0 margin.
>> Padding is 0, margin is 0, awesome. So that's the first thing to do, get rid of all of those unsightly bullets. Then the second thing to do is, we can start laying this out with flexbox.

[00:04:59]
So we're gonna start with display: flex, and that will immediately put everything onto a row, and doesn't that look impressive? So we have our logo and we have a mess that comes after the logo. Cool, so usually, the next thing that I say is flex-flow: row wrap. You do want the wrap turned on here.

[00:05:24]
Remember, by default, flexbox is gonna give you row nowrap. But you will want to have your navigation wrapping, particularly as you get to smaller screen sizes, you're going to want those links wrapping onto other lines. So we'll set that here. We can't read that right now. So we'll say gap of 2rem, and that'll give us a little bit of breathing room.

[00:05:49]
Notice that we have a link that's wrapping on to the other line. And then we can say justify-content: flex-end, so this is gonna align us to the right side of the page, just like that. Okay, so now all of the links are kind of up there at the top, in line with the word creative, kind of sort of up there at the top of the logo.

[00:06:18]
If I wanna push all those links down towards the bottom, how would I go about doing that?
>> align-items: flex-end?
>> Yeah, if I stick a border on this, 2px solid red, it'll show you that I've got all of my links right now, they're pushed to the top of the screen here.

[00:06:42]
So if I say align-items: flex-end, that is gonna push me down to the bottom. And our alignment will be a little bit better, just a little bit better, okay? And of course, we can always put on another border, 2px dotted blue. And that'll show us where that ul is in space as well.

[00:07:13]
So if we want to align our links, then, it looks okay where it is right now. But all of these items, Courses, Learn, Workshops, Join Now, they are aligned with the bottom of the tail, kind of here in Creative Space. Cool, but not really what we're looking for.

[00:07:32]
We probably want these words aligned with the bottom of the word space, right? So what would be some way that I could give each of just these items, Courses, Learn, Workshops, and Join Now? How can I give them a little bit of a bump up?
>> Padding, padding-bottom?

[00:07:52]
>> Padding on the bottom would work. Margin on the bottom would work, too, makes no difference in this particular situation, either one is fine. So what I'm going to say then is, li:not(:first-child). So all of the other links, but not the first one, we can say margin or padding, bottom: 0.9rem.

[00:08:19]
And that's gonna push us up just enough to align with the bottom of E in SPACE, nice. Yes.
>> Any reason that you decided to put the list item not ahead of the list item, or no, just kind of?
>> Well, if you just say not in general, so if you said not(:first-child), that would mean, anything on this web page that isn't a first-child, that would be a lot of things.

[00:08:48]
[LAUGH] So we wanna get more specific.
>> I mean, sorry, is the reason that you put it on line 15 through 17 as opposed to after the line 18, list item?
>> No, you could go either way, and the li:not(:first-child) is more specific than the li by itself.

[00:09:05]
So then the last thing, I'm gonna remove my borders now, they are ugly and we don't need them, okay. So remember, right now, I've actually pushed everything over to the right side of the screen, okay? So just bear that in mind for the moment. The last thing that I wanna do is, and just to keep things in line, I'm gonna stick this style up here.

[00:09:28]
This is just regular old nav by itself. You might give this a max-width of, let's say, 1200px, you don't want it to get any wider than that. Maybe you'd give it a little bit of padding, 2rem, just so it's not shoved up against the edges of the screen.

[00:09:45]
And we'll center it as well, margin: 0 auto. So now the navbar is centered in space, although it is still shoved over to the right side of the screen. So the last part of this is where the sizzle is at. So I've pushed everything to the right side of the screen, but I want the logo to be on the left side of the screen, right, correct?

[00:10:09]
[LAUGH] So how would I take just the logo, and push it over to the left side of the screen, leaving the rest of my navigation bar on the right side of the screen?
>> li:first-child, justify-content.
>> li:first-child, okay, so for the first-child, then we're gonna do what?
>> justify-content.

[00:10:35]
>> Okay.
>> left, does that work?
>> flex-start.
>> flex-start's good.
>> Okay.
>> [LAUGH]
>> That didn't do anything, why is that? Refer to your chart of properties, justify-content applies to the parent, not the children. So in this case, justify-content isn't going to do anything, but James is on the right track.

[00:11:03]
What we wanna do is we wanna put all of the space to the right side of that logo. And so, to do that, we can simply say margin-right: auto. Whoa, look at that. How cool is that?
>> So is auto trying to fill as much space?
>> Whatever extra space there is, we're gonna stick it to the left of the logo.

[00:11:30]
And the navbar is gonna shove itself all the way to the right because it's aligned with flex-end. Okay, super cool, questions on that?
>> So if we happen to be doing flex-start for the whole parent, it wouldn't work because everything's pushed up against to the left?
>> Actually, we could do it that way, we could say instead justify-content: flex-start.

[00:12:01]
>> That's the parent one?
>> Yep, that's the parent, that's the ul there. And so now I have my logo and all of the navigation after it. When I turn on my margin-right: auto on that same logo item, it still pushes it over to the side, okay? So either way, whether it's start or end, it will work exactly that same way.

[00:12:31]
>> This makes my previous question make more sense, right align, left align, it would be start and end?
>> Correct.
>> Because left and right are referring to, well, it's too specific.
>> Yes.
>> Start and end are more flexible, literally [LAUGH].
>> Literally, exactly, because we'd never know if we're talking about a column or a row.

[00:12:50]
Yep, exactly, yep, very good. All right, so at this point, all we have left to do are maybe a few tweaks to the navigation. Often navigation doesn't have underlines on it, so we could say something like text-decoration: none. That'll turn off the underlines, there we go. Maybe we want font-weight, Bold, cool, and maybe on the hover, maybe we want, So my text-decoration: none on the hover doesn't really matter anymore, we can turn that off.

[00:13:31]
But maybe I'll change the color to like #fed330, which is a lovely color of yellow, or whatever you wanna do, okay? And now you have a whole navbar driven by a flexbox, how cool is that? You like it? Awesome, now, this is one of the situations where I like to work with desktop-first media queries when I work with navbars.

[00:14:03]
So even though the rest of my website might be mobile-first and being laid out with min-width media queries, my navbar is often laid out with desktop-first. And the reason why is because it's actually easier and takes less code to go down to the smaller sizes as you're going towards a hamburger button.

[00:14:20]
Otherwise, you do all kinds of crazy programing to set up your hamburger button, and you have to disable all of it as you get to larger sizes. So for navbars, max-width media queries are often the way to go. So let's say we wanna go to a smaller dimension.

[00:14:35]
Obviously, this is working totally awesome, until we get around, this is like 883 pixels, so let's call it 900 pixels. We probably don't want that behavior, right, time to change the layout. So make your window a little bit less than 900 pixels and let's set up a media query.

[00:15:01]
Yeah.
>> Is that just kind of because of the width that we set for the image, so if we-
>> Exactly.
>> If it was different by 100 pixels, it would change your media query by 100 pixels?
>> Exactly so, so if my image did not have a fixed size or other things, we could definitely get away with a longer period of time before we have to change its layout.

[00:15:25]
Okay, so I wanna set up a max-width media query, how do I code that?
>> @media?
>> @media, always a good start.
>> Parentheses.
>> Parentheses.
>> max-width.
>> max-width: 900px, yeah? So no more than 900 pixels, do these things. So now what I'd like to do is I'd like to put my logo on top by itself.

[00:15:53]
And I want the rest of the navigation to appear on a second line and centered. Okay, so the logo will appear on the first line all by itself, centered. And underneath of that is going to be my rest of my navigation centered. Anyone think about what might happen, how we make that work?

[00:16:19]
>> Combining grid and flexbox into some horrible thing [LAUGH].
>> Gosh, wow, that's fabulous, I love it. Yes, let's good to combine grid and flexbox to make that happen. Fortunately, we don't have to do that, but that's a great idea, I love it. So first of all, let's center everything.

[00:16:41]
So if I say ul, actually, I think I had nav ul up there. So nav ul{justify-content: center;}. So we'll start by kind of centering things on the page. It doesn't really look like anything's happened, because, well, first of all, we're larger than 900 pixels. But as you see here, hey, if we make it small enough, my navigation centers really nicely, yeah?

[00:17:10]
[LAUGH] That actually kind of points towards some of our solution. I need to get this logo on a line all by itself. Can anyone think of a way that I might be able to make my logo big enough to occupy a line by itself? Hint, flex children, it's a child property.

[00:17:41]
>> Can you just put display: block that applies to first-child?
>> That's an interesting idea, let's try that. So li:first-child{display:block;}. Cool, that was a great idea, though. I thought that might actually work. Okay, so, what you can do here is you could say flex-basis: 100%. So we're gonna tell that li to take up all of the width.

[00:18:18]
So there it is, taking up all of the width, and it pushes the rest of my navigation down to the other line, yeah? Okay, so that looks really, really cool, except for the fact that my logo is offset and the designer's yelling again. So what are we gonna do?

[00:18:39]
>> Align items?
>> Align items, text-align: center. Hey, look at that, that looks nice. All right, how are you guys doing? Good, very, very cool, right? And then, of course, as we get smaller, somewhere in here is probably where we put our hamburger button. But I'm not gonna worry about that today.

[00:19:03]
So this is great for sort of tablet kind of widths, and then this will jump open to this kind of thing for desktop, okay?