Header & Navbar Styling for Mobile

[00:00:00]
>> All right, so we're on to then the mobile portion of the navigation and remember I said we were just going to set these up as buttons. I know the default these days is really to always set your navigation as a hamburger button. There's nothing wrong with that you can definitely do a hamburger button and I have covered that in the advanced CSS layouts course.

[00:00:19]
If you want to check that out and how you can make a hamburger button with just CSS without involving any JavaScript. But for today, let's make it with buttons because this is a layouts course. And we can lay out some buttons here, we don't have that many navigation items.

[00:00:33]
And they're kind of fun, they add a little bit of extra color to the mobile display. Just scrolling up a little bit here I have I have two nav UL declarations here I think I did this because this nav UL this part of it. Is kind of something that we always do and then this is the Flexbox portion of it.

[00:00:53]
Absolutely you can combine these into a single style there's no particular reason to declare the same thing twice. So there we go we haven't have one style with all of these elements in place. And then we'll go on to our our nav LI, so nav LI these are just sort of in general for all of our LI.

[00:01:15]
I'm going to have two buttons per line so we'll set our flex basis to 48% and we'll set our margin bottom to 0.5 rem. That'll give us a little bit of space in between our buttons, there at the bottom. Okay, so let's check what we've got here so far.

[00:01:40]
And I'm gonna scrunch up the screen a little bit more to get us to the mobile kind of layout. So there we are, you can see that we have our logo on its own line, which we definitely want here too. And we have all of our various hamburger button navigation items here.

[00:01:56]
Okay, so let's start to turn things red with white text, so to do that, we'll add here, on our nav a So I initially set this to be color one, I'm gonna change that now to white, so we have white text and I'll set our background color. To think it's color ten, nice red so a nice red button with a white text on top of it, okay.

[00:02:40]
So then to this will also add some padding of 0.5 rem and we'll add a border radius. Of five pixels, this will match the other in the collections portion of the webpage where we had borders. We had a five pixel radius there and so we're going to add it here as well to keep it consistent.

[00:03:04]
One of the signs of an amateur designer is to have slightly different curves all over the webpage. So try to keep them consistent if you're gonna make use of them. And then finally text, align, center, okay. Let's see what that looks like. So great, we have red backgrounds for all of our buttons, right?

[00:03:32]
Exactly what we wanted but it's also given us a red background on our SVG which is transparent by default. So now it's time to override that And so here We can say our nav li first child a, will have a background color of transparent. And that'll fix that problem very very nicely much better.

[00:04:07]
Okay, then we want a hover state for these. And so nav a:hover, background color of var Color one So they'll give us our black and a color var color five, so yellow text on our black background. So let's test that. So now when I mouse over with buttons, those all look.

[00:04:53]
Nice big contrast the changes and so forth when I mouse over the wall of wonder here, we do not get that same hover effect, why is that? Well, it has to do with specificity, believe it or not right here on line 100 notice it says nav li first child a and that is a more specific style.

[00:05:14]
It contains a pseudo class in it, the first child plus the a then the nav a:hover declaration. And since we are talking about the a stage, this is actually overwriting the a state for all of the states have the link. Link visited focus hover active and so when we try the more generic nav a:hover over our logo.

[00:05:38]
It's actually overridden by this transparent declaration that comes slightly earlier, which is fine. We really don't want to have a black cover on our logo anyway so it's kinda magic. But that is the cascade and effect there cascade and specificity. All right, so I think we've got our whole nav bar together at that point then, so we have a nav bar that changes radically over the website.

[00:06:03]
Here we are a desktop logo in the middle navigation spaced evenly on either side as we start to pull this in. At some point here, we want to do the break and our text wraps on to the next line. And then, when we push this closer a little bit more, we wind up with buttons here on mobile.

[00:06:23]
And those are fully clickable mobile areas and notice that when you hover over the edges of the button. It not only changes the hover state but we also still have a clickable area, that's because we put that display block on ra. Really important for making good usable links on mobile, okay.Any questions on headers and nav bars?

[00:06:46]
>> On hover on mobile those states wouldn't be seen or seen quickly before moving to the linked page. Is there a way for the hover to be seen utilized on mobile? With touch interaction you're not really going gonna see hover?
>> Right, yeah, absolutely true on with a touch device of course there is no hover state on mobile.

[00:07:07]
And so that's just the way it is and but you can put in the hover state here on mobile. People may have, for example, I was using an apple pencil earlier. Maybe you have that kind of device a stylus device with a small screen, which might allow you to do some kind of hover.

[00:07:25]
It's still on those devices but if you can't see it, it's one of those wonderful graceful degradation kind of things. You don't have to see the hover state in order for those buttons to work but I'm sorry, there's no way that you can hover with your finger. You are absolutely right and we don't have a CSS state for an equivalent type of effects for touch.