Styling a Navbar with Flexbox

[00:00:00]
>> Let's move on then to styling this, and in our instructions, we'll show you what this is gonna look like. So we're going to set up a horizontal nav bar. We're going to start by creating the navbar that we're gonna see on mobile devices, and on tablet. Now in a more professional setting here and in fact in my advanced CSS layouts course here at Front End masters.

[00:00:25]
I have walked through how to set up a hamburger button using only CSS. And so, but that takes a lot of extra time in order to set that up. So I've left that out in this particular course, if you're interested there is you can go watch that advanced CSS layouts course.

[00:00:42]
I will cover the how to put in a hamburger button with just CSS in detail for the purposes of this course and to keep this simple. We're going to use this particular layout here, for both mobile and for tablet settings. So the first thing that we need to do then is, we need to make our navbar go horizontally across the page.

[00:01:03]
And we need to put the name on top and make it bigger, and we wanna put all of our links there underneath. So that is the first goal that we have with our styling, just to worry about the text and to make that magic happen. So let's go through exactly how we might go about doing that.

[00:01:19]
So for our navbar, we have lots of HTML elements that we can work with here in our styling. And so the first thing that I wanna do is, set up my default font family and I wanna set up a little bit of broad padding for the entire navbar altogether.

[00:01:38]
And so to do that, we can just simply use the nav element itself as our selector. And we'll set our font-family, To Mono, because that's what we wanted in our design here. You see, we have Mono down here, okay? And then on the top, our name is in the oxygen song saref.

[00:02:04]
And then after that, we can set our font size, and just sort of throw you a little bit of a curveball. I've set it to 80%. Now you may not have ever seen percent's used in font sizing here before, but it works exactly as you would expect, take the base font size and reduce it by 80%.

[00:02:24]
So whatever that base font size happens to be, whether it's the H1, which is really big. Or whether it's the list items which are smaller, take it and multiply whatever that font size value is by a percent. And it proportionately shrinks everything down. So you see here that I didn't have to go through and specify a whole bunch of different sizes, everything scaled appropriately.

[00:02:47]
And then I'm going to add to this some padding, 1 rem on all sides. Now let's take a look at that H1, my name. I would actually like to have that, as I said with the oxygen sans serif font. So let's set that up. How would we go about creating a style that would target just Jen Kramer here?

[00:03:10]
And there are many selectors that can be used to make this happen, but this is a link inside of an h1 inside of a navigation environment. So remember that when you write CSS selectors you're going to write them. Just like everything else we write in English. We write them from left to right.

[00:03:29]
But we read them from right to left. Read your selectors from right to left. So I'm trying to Carga Jen Kramer. I'm going to start with a, that's gonna be my link. That's gonna be my furthest right selector, followed by h1, that will be my middle selector and then nav will be the one on the far left.

[00:03:56]
Okay, so nav h1 a. Here I'm gonna have a font-family of var sans, Okay? So now I have my first link, my name. It has a sans serif font and all of the rest of them have the Mono font. All right, now we can style the navbar as a whole.

[00:04:23]
So nav ul. For every navbar you ever write from forever forward, this is the kind of style that you can copy over and over again. It's always gonna start with these three things. We're gonna start with our list, style type of none that turns off the bullets. But you'll notice that we're still indented slightly, that is because the ul element and the ol element have by default on them from your browser either padding or margin [LAUGH].

[00:04:56]
It depends on what browser you're working with, sometimes it's margin, sometimes it's padding, but that's what's responsible for indenting your list. So we'll 0 both of them because we don't know which browser people will use. So we'll say padding:0, margin:0, and that will pull everything over to the left side of the page.

[00:05:18]
Okay, so the next thing we'll do is we'll go to Flexbox. The reason we're going to use Flexbox here, is because we have one long line of navigation. And we want to put this going horizontally across the page, and we may ultimately wind up wanting to reorder some of these things.

[00:05:37]
We definitely want to change the layout over time. Fortunately, Flexbox can be really, really simple in this kind of environment. There's only a handful of properties you need to know. And in fact, for say 85, even 90% of the work that you do in Flexbox, these are the properties are gonna be the ones you use over and over and over again.

[00:05:59]
All of the other ones that they might have covered in your boot camps or whatever, those are all extras, they're all exceptions to the rule. These are really the core properties here inside of Flexbox. So to set this up, we're gonna say display: flex. Now put everything together in a very ugly sort of line on the page.

[00:06:21]
There we go. I often say flex flow: row wrap: we do want these navigational elements to wrap onto another line. We don't want them to all crammed together as in a no wrap type of situation, we do want to have that flexibility of wrapping. We can justify content of center: so this is going to center us in space horizontally.

[00:06:52]
So justify content is the main axis of what you're working with inside of Flexbox. So here that is the row will center everything within the row. And we can also say a line items:center. This is the vertical axis in this particular case because we're working with a row justify content that pertains to the horizontal space.

[00:07:21]
Align items in this particular case is applying to the vertical space, which is the cross axis. And then so they're not in line, but don't worry, we'll fix this. And then gap is a new property you might have heard about or you might not have. So a really great invention inside of Flexbox that just recently became available, it will assign you a space in between all of these elements.

[00:07:49]
So we're gonna set that up to be 2rem. So we have a nicely spaced navbar here. So we already have all the bones of our navbar in place, with just a few properties here on the page. How are people doing so far? Have any questions at this point?

[00:08:06]
>> You put nav h1 as your selector, is it a good idea to skip the nav ul li h1 and your selector?
>> Yeah, so why did we not say nav h1 ul li a? Yeah, you totally could do that. That would be absolutely fine. There's nothing wrong with that whatsoever.

[00:08:27]
That would be a more specific selector than what I'd specified here as just nav, h1 a. My philosophy on this is always to put in as little as possible. And the reason you wanna put in as little as possible in your CSS selectors, is so that they're always available to be overridden later.

[00:08:45]
Also, fewer elements in your selectors make them more readable. So here, in my mind this is saying, we're targeting the a portion of this link it's inside of the h1. And we're gonna put it in the navbar and all of those things are important to understanding what that selector does.

[00:09:02]
You absolutely could add a ul, li you wouldn't affect anything here on the page Mitt just makes your selector longer, that's all. So yeah, that's one of those things you could go either way, I guess it's sort of a stylistic type of question.