Layout Navigation with Flexbox

[00:00:00]
>> Kevin Powell: Now, one of the most common use cases for flexbox is a navigation. So we can add in a navigation to our site. I'm going to walk through the steps of doing this just because it is such a common design pattern that you'll have to create. Once again, if you haven't been following along, you fell behind, there is the GitHub repo, or you can use the starting HTML and CSS and copy them into your files if you fell behind a little bit.

[00:00:23]
I've also supplied the logo for this one, so we can just right-click to download that little logo there. It's an SVG icon. I'm going to save that here, crown. You could rename it logo if you want. I'll keep it crown. And we have that file that we'll be able to use in our project. So let's jump on over there and take a look at it. And we'll move this over. I'm going to close my dev tools and jump over to the index.

[00:00:49]
I'm going to close the instructor now, we're not going to worry about it for the time being. For a navigation, generally speaking, they are found in the header of a website, so I can put a header at the top. Like a footer, headers often have, or not often, occasionally you will have headers in other places on your website. It could be the header of an article, the header of a section. So for that, it will give this a class.

[00:01:17]
It's just a habit that I have. I can call it page header. You have a page footer, I think that makes sense. It could also be primary header, because it's the main one at the top of the page. In here, I need my logo. I can just bring in an image, no problem. SRC is going to be equal to, in this case. Oh, we got that already. So it's just going to be in my images folder and it was my crown. If we go take a look, we have a little crown at the top of the page.

[00:01:49]
And in here, we also then need the navigation. For that, we have a nav element that we can use. You can have multiple navs on a page. You might have it for your breadcrumb, like a main nav at the top like we're doing, for some breadcrumbs somewhere else, a table of contents for an article. There's other places. So once again, I do like giving these classes. So I'll say class of primary nav, it's usually what I call them.

[00:02:14]
Navigations tend to be made up of unordered lists. There's some people who prefer just throwing links in here. I've heard arguments go both ways. This is the more traditional way of doing it. So I'm going to do links inside of list items. It's the more common one that you will see, so I think it's useful to follow that same pattern that you'll find more often in the real world. We don't, or I guess one of the homepage will be our index.html goes back to the home page.

[00:02:44]
We could link over to the instructor. And I don't have a third page right now, so we can just put a hashtag there. I just wanted three links because it's a little bit more fleshed out than having two of them. Home. Instructor. And finally, here we can put, did I put contact? I don't remember what I included. Start learning. Just to have some text up there. Start. Oh, whoops, I'm making a mess of things because href is equal to.

[00:03:34]
Let me just do that whole part again. Copy paste. And there we go, that was our start learning. So we get the three of them set up there, we get a list showing up right here. We can jump on over to our HTML file. I'm going to go up a little bit. We have our hero content, all of this. It's sort of layout related. I want to keep those things all together so I can come here. I'm going to start from the outside, work my way in.

[00:04:01]
So first was the page header. This has a background that's a dark color, so we can say, actually I think I might have provided new colors here as well. Did I? No, I didn't, but it is a dark color, so I'm going to create a new variable for that. It's much darker. We could just use black if you wanted to, but I'm going to just quickly come up. And we had the neutral 800 before. We can make a neutral 900, that's going to be a darker version of it.

[00:04:36]
And I'll drop this down to about 10%, maybe even a 5%. We'll see what it looks like once it's on the page. Then back down to here, so that was our color neutral. For something I write a lot, I do misspell it a lot. Neutral 900 should become black, awesome. We want the elements to go next to one another. Perfect. Display flex is good at that. I don't know how big they should be, so this is why flexbox is good for a navigation.

[00:05:07]
Each element is going to be a different size. If I'm using grid, I'd have to figure out how big they want to be. I don't want to figure out how big they want to be. I just want them to go next to one another. So that's what flexbox is really good for. This one's stuck on this side. I need this one to go all the way over on this side. How can I do that? There's two main properties we're using, justify-content or align-items.

[00:05:30]
Try one, if it's the wrong one, use the other one. In this case, I still mix them up, by the way, but in this case it is a justify-content, which I think I might have said items for, but justify-content space-between. So we can spread them out, one side to the other. Not a bad start, but now we have the problem with these all stacking here. So flexbox is perfect for this once again. We come take a look, and the reason flexbox really quickly is good for navigation is like each word here is bigger than the other one.

[00:06:03]
Again, with grid, you'd be creating a structured grid, and we don't really want the same size for each. I need the links to be the size of the links, so it makes a lot of sense to come in on that. In this case, I had my primary nav. I can't put the display flex on the primary nav. Because the primary nav is the nav on the outside, and then I have the ul. The ul is this, then I have the list items there.

[00:06:30]
So these are what I want to go next to one another. I want to select their parent. The parent is the ul that's right there. This is a pattern that I often follow where I use descendant selectors. Primary nav, and then I want my list that's a primary nav to probably be styled different from any other list. So it is a higher specificity selector, probably doesn't matter too much. Display flex. They're going to get really close to each other.

[00:07:01]
It's probably want a gap on there. And they have the default styling that's coming from being in a list. So we can say list-style is none, and lists do have default padding and margin on them that often gets in the way. So margin zero, padding zero. There are some accessibility concerns with the list-style of none on a list, iOS. Not iOS, but Safari. One of the screen readers that people use primarily with Mac doesn't announce lists that have a list-style of none as a list anymore.

[00:07:38]
One of the exceptions, they've recently updated this in the last six months, I think, where is if the element is inside of a nav, it will now be announced as a list. So we can, if you're using it in this use case, you should be fine doing it. There are a few other advanced approaches that you can do with roles and other things to ensure that it still gets announced as a list if you want it to be to a screen reader, but I think in this situation we're safe doing it this way.

[00:08:09]
Okay, so it's not bad, but we have some problems. Anyone want to highlight a problem I could fix? Nothing major, but just, yep, go for it. Um, we put a wrapper on it so it doesn't go. Awesome. It's got max-width on it. Yeah, so right now it's touching the edges of my screen, and if we go really big, it's just going to keep on going all the way out. So we need something to hold it in place. A wrapper is perfect for that.

[00:08:33]
Now I made a bit of a mistake when I did this, and just because this is a really common pattern that we can have, but I did my page header as a display flex. As soon as I come in here and use that wrapper that we've already created, so wrapper starts there. Close my wrapper down here. It just broke the layout. That sort of sucks. So how do we fix that? What's like, and the, well, first of all, the reason, now this is the flex item and the stuff in there is no longer flex items.

[00:09:00]
They've gone back to the regular flow. This is one of those battles that you might find as you're not used to certain patterns and then you're having to add the wrapper and then the whole thing breaks. So a very common solution is then to have something like a div class is equal to page header. You might, if it's like a BEM style, you might say page header inner for the intersection or layout. So we could just do, it could be content as well, but this will be the layout of our page header.

[00:09:36]
So start the page header there. Close the div. I'm just closing them down here and then hitting save, so Prettier is formatting the nesting of it for me. So now if we take a look, page header at the top. Inside my page header, we have just a wrapper. That's holding my content. Then we have this header layout. Then we have the crown and the primary nav that are in there. Okay, so let's go back to here and try and fix this up.

[00:10:03]
Background, that should stay on the page header. I want the black background to go all the way out. I don't want to move that or then it's stuck inside the wrapper as well. So I can take, leave the background there, but this part or these two parts are perfect to go over here on the page header layout where I can put those and then we've just fixed the problem we had. Two other things really fast.

[00:10:30]
We probably want a little bit of padding on here, so I'm going to do a padding-block of maybe not too much, let's do pixels, we've been using that so far, 21 pixels just to add a bit of space on the top and the bottom for a bit more of a black background and the other potential issue is if we go into smaller screens. We could run into like this collision that's happening with the logo and the name.

[00:10:55]
So on the page header layout, where we're doing our display flex, we could add a gap. Let's say 21 pixels. So that fixes one problem where they won't touch each other anymore, but as we get really small, this situation specifically on this layout, maybe it's not a big deal, but if you have bigger navigations or bigger logos. This is more likely to happen. So on the ul over here, we could also add, or sorry, no, right here, we could add a flex-wrap of wrap, so if they do collide.

[00:11:29]
They bump into it or it goes down. And last thing is on the ul as well. If you really want to be safe, you get a flex-wrap of wrap here. So if it started getting really small, they all go onto their own lines. I'm running in, I'm getting to ridiculously small sizes at like 200 pixels, so we're getting some other issues coming up, but for the most part, everything is working pretty good there, even when we start getting to really narrow viewports.

[00:11:55]
So let's just close those dev tools down. Yes, is the text shrinking because pixels start to become pixels at some point? It's, no, it's when you're in the responsive mode, if you start getting too small, it starts doing a like a weird zoom, so it just looks like it's trying to fit the content in the viewport that we have at like 200 and I'm zoomed in on my small screen. So just some weird stuff that was happening, yeah.

[00:12:29]
Lastly, just really fast, we could come on the primary nav a's to select the links that are inside the primary nav. Maybe we do a font-weight to make them bold and we can say the color is going to be var color neutral 100 to make them white. And we can also say we haven't looked at it yet, but on links in general, text-decoration, in general, you don't want to do this to a link, but navigation links have become such a common pattern that not having an underline on it, people still know it's an interactive thing, but you generally want to have at least two forms of visual information that something is a link, so the underline would treat or would be one of those.

[00:13:14]
But finally, you can say primary nav a hover and primary nav a focus-visible, we could just do a focus because it's a link. And we can maybe just change the color to the color accent 300 that we had before. And now we get a little hover effect while we're going on top of them.