Header & Navbar Styling for Tablet

[00:00:00]
>> And that will hold really nicely for a while, until we get down to sort of 800 pixels. And in here, well, we're outside of our media query and so all the styling gets turned off. But also it starts to look a little bit crowded, doesn't it? So this is the point when we can rewrite our CSS to make this look a little bit different for a tablet dimension.

[00:00:23]
And so, that would start, in our case it starts around 800 pixels. So let's go ahead and write that part of it up. Here's our media query, 550 pixels, the min width, and I'm just gonna scroll on down here. And we'll add in our navigation here. So, I'm gonna say now view well.

[00:00:52]
I'm gonna change this to justify content center. And and I'm gonna make use of my gap property, 1.2 Here I'm using instead of rams because I wanted to take advantage of the text size, so the gap will scale with the text size. That is true when you use.

[00:01:13]
If you use rem, that's our route relative and your gap will never scale because it's relative to the HTML tag, it'll be 16 pixels is one REM all the time regardless of where you are in the document. But one That size can vary depending on what HTML element you're looking at.

[00:01:33]
One em an h1 is much larger than one em a paragraph Okay, then we'll have nav li, and here we're gonna have a flex basis of auto and a margin bottom, Of zero. So basically I wanna have my li's be as wide as they are. Rather than having being pushed off to the sides, the way I just did on the desktop.

[00:02:10]
And then here for my nav a, Color var, color 1. I know I did that outside for the mobile, but we're gonna change the color on the mobile here in just a minute. So I'm gonna read Eclair, that black color down here inside of my tablet media query, which will then carry on to the desktop media query.

[00:02:35]
The color or the background color will be transparent, why? Because when we finally finished writing our mobile styles, we're gonna have buttons that are gonna be red, backgrounds with white text. And so here inside of this media query, we need to turn that off. So we've set our background color to transparent, and our text color to black.

[00:02:58]
Yeah Mark
>> Is it possible to set orders like this to guarantee an item would always be in the middle for in the case of like dynamic CMS where things can be added and removed from a header navigation menu?
>> Sure, so the trick here with getting things to look really pretty in the center with this type of technique is having an even number of navigation items, so that the logo can wind up being in the center.

[00:03:25]
And then you have however many additional navigation items on either side, if you have three on one side and two on the other, it's always gonna look less balanced with this particular technique. But by using margin zero auto, maybe some of that will get mitigated a lot little bit at least.

[00:03:43]
But I would think that that would work okay with a CMS, I mean the only issue is as always, what happens when your users put in a dozen or two dozen navigation items and how is that gonna get handled. Is it gonna wrap on to another line of navigation and so forth.

[00:04:00]
So there are there are edges definitely to that for a CMS. Okay so we've got hover state, nav a hover. Color is gonna be var color 2, so nice to green and our background color once again transparent because it won't be on the mobile. I found the error, okay, so I skipped over a very important setting that I had in the mobile, that needed to be there to carry into the tablet and I did not put it in.

[00:04:42]
So let's put that in now. I am in the mobile portion of my styling. I am looking at roughly line 80 or so. And the important piece of my styling is this that I need to add it is nav li:first-child. And what I said here was the flex basis is 100%.

[00:05:06]
Hopefully one of you guessed that. The problem we were having, remember was that the logo was on the same line with the other navigation items. And what we wanted, the logo to be on its own line. So by setting the flex basis to 100%, that indeed puts the logo on its own line.

[00:05:22]
And then we can also throw in text align center, which will center that logo very nicely in the middle of the page. So once we have that in place, then when we go back to our Firefox here, and refresh now we have our logo in the center and we have our navigation there after it.

[00:05:46]
So that was the piece that I'm missing apologize for that.