Header & Navbar Styling for Desktop

[00:00:00]
>> Okay, so let's get this styling here, I'm going to set this up just after section UL here around line 52. Let's go ahead and put on our nav, header and nav styles here, header and nav styles, okay, we'll give ourselves a little bit more room. Okay, so we'll start with that header, the header class and let's assign its background color, that's gonna be var.

[00:00:41]
Color number five, the light yellow so that'll give us a nice light yellow bar across the outside of the webpage. And if we refresh you should now see yellow there at the top, you'll also see a little bit of green above that and some other things, one step at a time.

[00:01:00]
That stripe of green on the top is coming from the UL, which has a bit of margin associated with it, at least on my Firefox browser here. It's sometimes it's got padding associated with it instead, so we'll turn that off here in just a moment. So we'll start here with header itself And inside of the header HTML element, then we can set up some padding like one rim, just so we don't run into the edges of our webpage.

[00:01:35]
We can set our max width of 1200 pixels, which we've been doing with all of the sections to this point. Now we're doing it with the header as well, we also did it with the footer and then we can center this with margin, zero auto. So that'll push this to the center of the page, and it will line up with all of our other sections in the footer very, very nicely.

[00:01:58]
So to show you that that's true, I don't think we're gonna see a huge change here, so things sort of push over a little bit, so that's how it looks now. All right, then we're on our way to our navigation. And we're gonna do the universal stuff. Across the break points.

[00:02:35]
And so here what we're going to do is a Nav UL, turn off the bullets list style Type none, margin zero, padding zero, they really ought to just like make a single property for all of this cuz you do this all the time. Anytime you're working with a list that you don't wanna look like a bulleted list, these are the three things you've got to do.

[00:03:06]
Then let's continue on here, Nav UL. Display flex, flex flow, row wrap, justify content, space around, space around, there we go. Space around, there we go, all right, let's check in and see how that's going so far. So, if we just refresh this, immediately what you'll have is you have the start over navigation bar, just by putting in that tiny little bit of Flexbox.

[00:03:55]
We remove the bullets, so those are gone by putting in a little bit of Flexbox, we made the navbar go horizontal across. Cross the page and by using the space around or we could have used space between that pushes everything. All these navigation items and remember the logo is the navigation item pushes these all out evenly here on the page, so not bad so far.

[00:04:22]
If you wanted at this point in time you could do things like the following. So we could say something like Nav li first child, remember that that logo is the first child there in the navigation. We could say margin, right, auto, so put the free space over there on that side.

[00:04:49]
And if we changed our justify content to something like I don't know Flex end, okay, what do you think that will do? If you have your logo, the first child, and we have a margin on the right of auto. And we're going to justify our content to the flex end, that should put the logo on the left and the navigation on the right, correct, so let's take a look at that.

[00:05:21]
Little bit of work to do on those navigation items, but the shape is there, right? We have the logo on the left, we have the navigation on the right, so it's one of the cool things that we can do with Flexbox. If that is something you were looking to do, that would be very easy to do that way.

[00:05:37]
Okay, but that is not what we're doing here, okay let me just write a couple more styles here for some generic styling for these links. And then I'm gonna go to the desktop and we'll continue on with the desktop particular layout, so. But we have to style up our links first here outside of the media queries So for the links themselves text decoration of none.

[00:06:06]
Always turn off your underlines and the navigation, font size 1.2 rem looks a little small make it a little bigger color of Bar, let's do color one, so we'll make them black by default and then display block. Always display your links as block, when you were inside of a navigation bar.

[00:06:41]
And again, this has to do with taking your link and pushing its edges all the way out, to whatever clickable area. You're going to wind up having inside of your navigation bar, this will help with again fingers on mobile. It will help with people with issues and disabilities surrounding their mouse being able to get to those particular items.

[00:07:00]
There's no downside to this, so set your navigation to display block there for the links. We'll give it some padding, so now I'm gonna go all the way down here, actually first, let me say this and show you what it looks like so far. Okay, so we're gonna It looks like so far, we've kind of got it in the center of the page, it's a little bit weird.

[00:07:25]
There's some issues and things going on, we'll address all of that here just a moment. Down here at the bottom at the desktop media query, so 800 pixels and higher. Let's add some more stuff here, so we wanna put the logo in the center. Navigation logo in the center so to do that we're gonna say our Nav UL, I'm gonna say this again, Justify, content, flex.

[00:07:59]
And I think I just set it up on the mobile side of it, but we'll eventually change that on the mobile, so I'm gonna restate it down here on the desktop. Then I'm gonna say Nav li first child. Yes, you could do this with a class instead but this is a very efficient selector and we don't have to make any classes.

[00:08:21]
It's the first child is the logo so we're fine, we're going to say our flex basis is auto. We will wind up setting the flex basis later on when we're at the tablet or the mobile dimensions. So we want to turn off that flex basis for that for just the logo and we'll set our margin to zero auto.

[00:08:44]
So that'll center it and then we'll set our order to two, so then we have our Nav li nth-child, Two. And our Nav li nth child three, these two elements, which again, you could do this with a class if you'd like. We're going to say their order is one and then nav, we're just going to copy that whole style again.

[00:09:27]
So this will be number four and number five, we'll set the order to be three, so by doing this we've called out our first two text navigation items. We've said that they're going to be order one, we've called out our last two navigation items and said they're going to be order three.

[00:09:47]
And we set everything to do flex end but yet we told the logo we wanted in the middle and we set our margin to auto. So what will wind up happening is that our navigation will get pushed all the way out to the very edges of the navigation bar.

[00:10:03]
And the logo will show up there very nicely, in the middle, so let's see what that looks like. Just like that, right, so there's collections and about then we have our world of wonder, and then we have contact and donation.