Hamburger Menu Tablet & Mobile Styles

[00:00:00]
>> All right, so we're gonna move on now to the mobile dropdown menu. I'm gonna make one change here immediately, which is I want my max width to be 600 pixels. Why? I don't know. That's sort of what worked for me. So the next thing that we need to do, we need to style our hamburger button here, which is the wrong color, right?

[00:00:25]
And when we click it, we get this weird fly-down thing like this. Do you like it?
>> No.
>> No, what would you rather have?
>> Drop down.
>> Some kinda drop-down kinda thing that occupies the whole screen and just has the links on it. Kinda like you see on every other website.

[00:00:45]
Yeah, okay, we can do that. All right, so let's start with the easiest thing first. Let's start with this hamburger button. Where is it? How do we change its color? Take a look there in the code and see if you can find that. Pro-tip, there is a comment where it says [LAUGH] where the hamburger button is.

[00:01:07]
[LAUGH]
>> 182.
>> Yeah, around 182, something like that. This is the hamburger button itself right here, MainMenuOpen after content. That 2630 calls for the hamburger button, okay? So where's the color for the hamburger button called?
>> In there.
>> Well, I don't see the color here right now, where would the color be called?

[00:01:34]
>> Up above in there. Up above right here in MainMenuOpen. So let's change that to var magenta or whatever color you want. Okay, so the next thing here is this one. It's called MainMenuOpen + nav. What does the plus sign mean?
>> It's an immediate sibling.
>> An immediate sibling.

[00:01:58]
Yep, the, Sibling right next to each other. So next to MainMenuOpen. So here's that button, right? Here's that button. That's the one with MainMenuOpen. When we say + nav, we're looking for the sibling, right? So the same level, immediately next to it. So that is this nav right here.

[00:02:23]
There's no other nav in the document. Now, did he need to put that plus sign in there? No, [LAUGH] cuz without it, it will work just fine. It will still work just fine. Although look at that, I just broke it. So what do I know? I know nothing.

[00:02:43]
>> [LAUGH]
>> We'll leave it in there because it was working. But that is what exactly that is doing, okay? So, the nav immediately next to the button which has that ID of MainMenuOpen and has JavaScript associated with it. Okay, so what this is saying, can anybody look at this bit of code and sort of interpret what's going on here?

[00:03:10]
Let's look at position fixed, top zero, left minus 100%, width 100%, height 100%, overflow auto, display flex. What is going on here?
>> [LAUGH]
>> Is that the original starting point?
>> Yeah. So this is at fixed position, means that it's gonna be static on your screen, right?

[00:03:32]
And if it's to the left 100%, where is it?
>> Not on the screen.
>> Not on the screen. So that's what's going on here with this. It's at the top of the screen, but left side it's -100%. It's totally hidden from view. When does it come back into view?

[00:03:55]
>> It's focused.
>> When we hit the focus. So the button is focused, in other words, we remember we don't have a click inside of CSS, but when the button has focus, so the mouse is focused on it. Then we can shift that left from -100% to 0.

[00:04:17]
That brings the thing on screen. And we bring up the opacity from 0 to 1 and make it visible. See how that is working? Okay, so with that in mind, let's click the button and see what happens. So when we click the button, So what can we interpret here?

[00:04:42]
We have a background color of defd. Anybody wanna take a guess at what color that might be? [INAUDIBLE]
>> This kinda light blue on the screen, right? And it has no opacity to it. So this light blue color to it, that is what's going on here. So we can start making some changes to this.

[00:05:05]
We want to leave the box off-screen, right, by default until it's clicked. We can leave this set to display flex. Let's give it some padding from the top. Let's give it 100 pixels, so it'll push down the page a little bit and I'm gonna get rid of a line item center and just leave the justified content setter.

[00:05:35]
And then I am going to make my background black instead because this is a magenta line like blue is just not cool on this website. So we're gonna change this if you're wondering what a four-digit hex code is, remember we talked about H-digit hex codes earlier. This is that shortened version of it just four digits.

[00:05:55]
So if we change this to 000 followed by the letter d, that'll make it black with some opacity. Makes sense? Okay, so now when I click this, you see how the background got black with some opacity to it, and that's coming from this color here on the background.

[00:06:16]
How cool is that? So the next one we will look at here is the nav with the unordered list in it. And we're gonna make some changes to this one as well because this is what you see here. This thing that comes on the screen, this is that ul thing that's going on.

[00:06:33]
Whatever this is, we wanna make some changes to it because it's kinda ugly. And so to do that, we can get rid of the, I don't know why this guy kept putting in flex-grow for everything. We don't need it. You can get rid of that. And this time for our flex, I'm gonna change this to a flex-flow.

[00:06:55]
And we're gonna say this is a column wrap. So other words, we want things to display in a column here, right? We wanna have our stacked-up navigation vertically, instead of it going horizontally on the page as it does on the desktop. So when we click this now we have those funky button things, they're at least going in a column sort of vaguely, right?

[00:07:17]
Okay, so that's what that did.
>> Why did you do that instead of just flex-direction with column?
>> You can flex-flow is shorthand for flex-direction and flex-wrap. It's a shorthand property that puts both of those in one property.
>> Got you.
>> Yep, okay. So we can then say justify-content, flex-start so that is gonna put us at the very top of that box.

[00:07:53]
You may not see much change yet, but it will come. Now, right now this is set to a max width of 14 m and, I don't like it. [LAUGH] What I'm gonna do instead is I'm gonna change that unit. So I'm gonna have a max width of 100vw.

[00:08:21]
What is vw?
>> Viewport width.
>> Viewport width, right? So whatever it is, we're gonna occupy no more than 100%. Basically the whole width of that viewport. And we can also have a min-width if you want of 50vw. So it's gonna be somewhere between 50 and 100, right?

[00:08:46]
Overflow hidden. Okay, so then there's some other stuff that's going on in here as we bring the box down having added that. Some extra things we don't need. We don't want this background color. That's ugly. 8ac is gonna be yet another light blue color. Very not magenta line.

[00:09:08]
So we're gonna get rid of that. We don't need these border radiuses because we're not having the rounded corners in our flyout menu. We can get rid of that. We don't need any box shadow because we don't have that in our menu. We can get rid of that.

[00:09:22]
We can still want the transition from the top though because we still want the menu to come in, right? So now when I click this button, we get sort of the skeleton of this main menu. Make sense? Okay, so then we're gonna go down here to our top nav a.

[00:09:37]
And you see here we have top nav a, top nav a.action. Do we need top nav a.action? Do we need that style? No, we don't have any action anymore, so we can get rid of that. And here in this top nav a, we have our display block, which is good.

[00:09:59]
We can change our padding. I'm gonna change this to 2rem 1rem. And we'll keep the text-align center, but we don't want the white background. We don't want a box shadow. We don't need a border-radius because we're not doing that, right? When we click this, now we have, here's our three links, and we're getting closer and closer and closer by stripping some of this extra stuff out.

[00:10:27]
Everybody see how that's happening? Cool. All right, we get to our next style here, which is the top a focus, the hover, and then we've got the action version of those. Do we need the action version? Nope, we got rid of all that, so we can delete that.

[00:10:48]
In fact, do we even need any hover styles at all?
>> Not for mobile.
>> Not for mobile, right? If you're actually doing mobile, do we need this stuff going on? Let's get rid of it. So let's just get rid of that whole, blah, don't wanna. So there we go.

[00:11:11]
Now it's a lovely light blue [LAUGH] ever state, we're getting there, stripping one thing out at a time. Okay, so now we're on to our MainMenuOpen nav ul before and after. So before we have this content here that says Main Menu, right? So that is this whole thing that appears up here at the top.

[00:11:37]
We actually don't need any of this. So let's just get rid of that whole style. Okay, the whole entire style. We don't need any of that. We don't want it to say main menu. We don't want any of that kinda stuff. So we can just get rid of it.

[00:11:52]
Almost done. Okay, so then the last part here is the after part of this. So right now you see here we have our content is set to this thing that doesn't work. [LAUGH] Okay. Well, we'll just get rid of that. But we're gonna keep the content you can make a space or something, but we're gonna get rid of that code that isn't even working.

[00:12:19]
Instead, we'll set up a background image. And I have an asset for that. Did I give it to you up here in the top of the HTML? Hopefully, I did.
>> I think so.
>> Okay, great, so if you look up at the top of your HTML, you'll find it.

[00:12:41]
I don't have it in front of me at the moment, so I'm gonna copy this URL, great. And what we'll do is we'll set it up as a background image. Background is url, that thing, that close button. And then we can say no repeat, And center so that it'll not repeat and look nice.

[00:13:12]
Because we're working with a background image, we should set a width and a height to that. So width 2rem, height 2rem. So there's our close icon. It closes. Woo hoo, yay. As for the rest of the styling here, you can get rid of whatever you want. I get rid of let's see, I didn't play around with top and right.

[00:13:49]
I just got rid of those. I got rid of the font size. I got rid of the line height cuz that comes in from our base. What I will say is, top is 0, and right is 0. And so, now when you click on it, there's our close icon.

[00:14:10]
It's working. Check it out. We did it. That was a lot of work to repurpose that but we made it. How are you doing? Yes.
>> A little bit ago you did the 100. The width was 100vw for something.
>> Yeah, up here
>> What's the difference between max-width 100% and 100vw?

[00:14:41]
>> Great question. What is the difference between max-width of 100% and max-width of 100vw? Anybody wanna take a guess?
>> 100% will fill the width of the parent's width.
>> Right.
>> And 100vw is just a vw no matter what.
>> The vw of the browser. Right, exactly.

[00:15:01]
Always the question relative to what? And that is the answer for any vw.