13.5 Mobile dropdown menu - Video Tutorials & Practice Problems

<v Michael>In this final section, we will adapt</v> this menu here that we just made to mobile devices. And in order to get started with that, we have to learn about a couple of new HTML tags called label and input. Let's take a look at a diagram to help us out with that. So these are really common on the web, aren't they? <v Lee>Yeah, you see input fields everywhere.</v> Anytime that you have to type anything into a website, you're using an input element and you can have ones that are text input, like the email or username, or you can have a checkbox like down there next to the "remember me," you see these all over the place on the way. <v Michael>And this is the kind of thing,</v> this is covered in-depth in the Rubian Reels tutorial, among other places. <v Lee>Right.</v> <v Michael>For our purposes here, we're going</v> to be using this checkbox element. It's gonna be an input of type checkbox, and we'll adapt that into a mobile-friendly menu. Is that right? <v Lee>And the label, too.</v> <v Michael>Oh, the label too.</v> <v Lee>So, the text label.</v> So if you've ever noticed on a webpage, you might have noticed this, I should say, you can click the text and it will check the check box or you can click the check box. So we're actually gonna be using that plus some CSS pseudo classes and we're gonna be able to tell when that check box is checked and we'll use that to control stuff on the page. So this is something that actually would've been, before this technique was created, only really possible to do with JavaScript. Our menu here, you can't click on this to open the menu. Once you hover out, it goes away. But using this technique, you can actually click on a menu item and it'll stay open, which is pretty cool. <v Michael>That is cool.</v> All right, so do we wanna switch to the mobile view now? <v Lee>Let's put in the element first,</v> just 'cause this will give us a little bit more viewing space. <v Michael>Okay, so this is gonna be in,</v> which part, it's the header? Is that right? <v ->Yeah.</v> In the header, we're putting this inside of the nav. <v Michael>Okay.</v> So input tag. <v Lee>So if you're wondering why we're adding</v> an ID to this, I know Michael might be wondering that. <v Michael>Yeah.</v> <v Lee>The reason is that for the label,</v> for you to be able to click on the text and for it to check the check box, we need an ID on the input, the checkbox input and then in the label, we're gonna use a different little attribute that is called for. And we'll put the ID of the checkbox in there and then that way the label knows that if you click it, you're intending to check the checkbox with the same name. <v Michael>Got it.</v> So this is one of those road cases where we wanna use an ID, even though we're not using JavaScript. <v Lee>Exactly.</v> <v Michael>So input here doesn't have a closing tag.</v> It's just a void element, right? <v ->Yeah.</v> <v ->But label, just like that.</v> And so we can take a look now on the page, you can see there's a little check box here. <v Lee>Yep.</v> <v Michael>So we can see that we click on it like that</v> and it works, but we also wanna be able to click on the word, "Menu." <v Lee>Right.</v> <v Michael>And right now, that doesn't work,</v> but we can arrange for that as we mentioned by saying for equals and then the ID of the input. So now if we refresh and click here, aha. You can click on either of them. <v Lee>Yep.</v> <v Michael>So this is gonna be our menu.</v> Is that right, Lee? <v ->It will.</v> <v ->Wow.</v> <v Lee>So the text will be the menu,</v> the input will be hidden and we're gonna use the state of the input to control everything that comes after it. So if you look at the code, you'll notice that we put the input at the very beginning of everything. So what we can do is because it's all in this nav element, this HTML element, we can use the sibling selector to say, oh, anything of this type after this check box, if it's checked, then apply these styles to it. <v Michael>Hmm.</v> <v ->So let's actually do that.</v> <v ->Okay.</v> <v Lee>But first, what we're gonna do</v> is actually hide this for desktop and since this is just gonna be for mobile, we're going to switch to that view. <v Michael>Yeah, so we're just gonna use</v> our media query here, right? <v Lee>No, first we just need to add</v> a CSS style to all of this. <v Michael>Okay, where does that go?</v> <v Lee>We can actually put this up by the header stuff.</v> So the only thing that's gonna happen with media query is showing things. All of the styles for this are gonna be just normal CSS. <v Michael>Okay.</v> <v Lee>So, we can add this after the header styles,</v> 'cause this is kind of a header thing. Or after the dropdown styles too, could be. <v Michael>Okay.</v> <v Lee>There we go.</v> <v Michael>Okay, so we can put it here.</v> And what do we need to do here? We just need to hide it, right? <v Lee>Yeah.</v> So mobile menu check, and show mobile menu. <v Michael>So that's, where is it, here?</v> Mobile menu check and show mobile menu. These two, right? <v Lee>Mm hm. Yep.</v> <v Michael>You'd like to put these</v> on different lines, is that right? <v Lee>Yeah, just a little easier to read.</v> <v Michael>Okay.</v> All right, so that hides it, so this should disappear. <v ->Yeah.</v> <v ->Yeah.</v> Then we're gonna go down to the media query part, right? <v Lee>Yeah.</v> <v Michael>That makes sense.</v> And do you think it should just go down here, or at the top, or what's a good place? <v Lee>I would say put it by the header in there,</v> in the media query. <v ->So, right after?</v> <v ->Yeah.</v> <v Michael>Okay, so right here, we're gonna do mobile menu.</v> And so we're mainly going to be styling these two, the mobile menu check and show mobile menu? <v ->Yes.</v> <v ->Is that right?</v> And then we we'll also probably wanna style the header nav. <v Lee>There's gonna be a lot of stuff</v> getting styled right here. <v Michael>It's a lot of stuff, all right.</v> <v Lee>It's not a quick thing.</v> It's we're gonna end up touching pretty much everything up there so that it fits better for mobile usage. <v Michael>Okay, let's get started.</v> <v Lee>So, yeah.</v> The first thing that we're gonna do is, like you said, the show mobile menu, we want this to show up where we have our navigation items now. so we are doing a display block and a float right. <v Michael>Do we want to look at the mobile view now or...?</v> <v Lee>Yeah, oh yeah, sorry.</v> Let's look at the- <v Michael>We should do this like that, right?</v> Okay. <v ->Okay.</v> So, where are we? <v Michael>Restore our inspector.</v> Okay. <v Lee>So wait, let's see</v> over on the screen, if you're refresh? Ah, there we go. So the display block is there because we have to undo the display none. <v ->Right.</v> <v ->Right.</v> So let's also float it to the right and we're gonna give it a little bit of padding so that the hit- <v Michael>So this box will float it over here.</v> There it is. <v Lee>We're gonna make the hit box</v> a little bit bigger with some padding. <v Michael>Right.</v> <v Lee>'Cause you want to be able to, you know,</v> hit this with your thumb. <v Michael>Right.</v> We're gonna give this a position relative so that we can position things if we need to, which we will need to. And we're also gonna give it a little margin top 1.5 VH. There we go. <v ->Cool.</v> <v Lee>So then we're also gonna style the header nav.</v> We're gonna do max height zero. <v Michael>What does that do?</v> <v Lee>So that makes it take up zero space.</v> <v Michael>Yeah, I see. Okay.</v> <v Lee>As the maximum height, but it's not gonna</v> do anything because overflow hidden is not turned on. <v Michael>Okay.</v> <v Lee>So the reason we're using max height</v> instead of just height is a little trick that we'll talk about in a second when we add the transition. <v ->Okay.</v> <v ->Also, padding zero.</v> And then we're gonna add a transition on this one of all 0.5 seconds and ease in out. All right, so here we go. So when you're working with the transition and you have an element that you want to expand in height, you can set height to zero and it'll go to zero, right? But the problem is is that if you want it to expand to an unknown size, like say you don't know how many things are gonna be inside of it, so you don't know if it's gonna be 500 pixels or 300 pixels or something like that, you can't use height auto in a transition. So for the transition to work, you need to give it a set number of pixels. Does that make sense? <v Michael>What is the transition here?</v> <v Lee>The transition is gonna make it</v> so that when we click this button, the menu looks like it animates onto the screen. <v Michael>Okay, it's not working yet though, right?</v> <v Lee>Well, no, we haven't made it work yet.</v> <v Michael>Okay, got it.</v> <v ->But I'm just saying why we have to use max height.</v> <v Michael>Okay.</v> <v Lee>So, the nice thing about using max height</v> is that you can say max height zero and overflow hidden and that will hide all the content and then when you want it to show, you can say max height of like 2000, but since it's only a maximum height, the element will open up to the size of the content. <v Michael>Ah, I see.</v> 'Cause otherwise, if you said height a thousand, it would actually open up to those pixels. <v Lee>Right, it would actually make it a thousand pixels.</v> <v ->Yeah.</v> <v ->Yeah.</v> <v ->And because you don't know how big the content</v> is gonna be inside, this is a little hacky way to get around that and still get an animation out of it. <v ->Right and this is assuming that the height</v> doesn't actually exceed a thousand pixels. So you pick something <v ->Right, right.</v> <v ->That's so large.</v> <v Lee>You just pick something big.</v> <v ->Like there's no way.</v> <v ->Right.</v> <v Michael>So we're going to work</v> on the mobile menu check right here. Or is it this? So basically what we're gonna do is we're gonna say that if you check this- <v Lee>Right, that input.</v> <v Michael>Which, because of the for,</v> we're actually gonna be clicking on the link 'cause we've hidden the check. <v ->Right.</v> <v Michael>Then we're gonna use the checked pseudo class.</v> Is that right? <v ->That's right.</v> <v Michael>To change the max height.</v> I understand. This is really cool. So there's the checked pseudo class, Which we would get by clicking on, like we just said, on the actual checkbox, <v ->On the input, yeah.</v> <v ->But also on the link.</v> <v ->Right.</v> <v Michael>Or on the label.</v> And then we're gonna say that we can use the- <v ->Generic sibling.</v> <v ->Generic sibling.</v> <v Lee>Yep.</v> And then header nav and now we're gonna add our max height to it. <v Michael>I got it.</v> This is pretty cool. <v Lee>Yeah, this is some,</v> it's some real neat hackery to make this thing work. <v Michael>So now, if I click on it, ah, it appears.</v> <v Lee>Yep, and you can see it's like-</v> <v Michael>Oh, and it goes both ways.</v> That's so cool. <v Lee>Yeah, you can see it animating down,</v> like it's revealing. <v Michael>Yeah. How did we...?</v> We hid the checkbox. Where was that? <v Lee>The checkbox is up at the top.</v> Sorry. <v Michael>Yeah, so I wanted, let me do this here.</v> I'm just curious. <v ->Yeah, good idea.</v> <v Michael>Yeah, so here's the check box.</v> And so if I check it, oh, it appears, uncheck. <v ->Yep.</v> <v ->And the same thing here.</v> Now we can see it getting checked and unchecked as I click on the menu. It's all the way over here because we have the position changed. That's cool. <v ->Right.</v> <v Michael>But we actually do want that to be display none.</v> So here, this is in the non-mobile part, but we didn't override that, right? When we said at the bottom here display block, that was only for show mobile menu. So this thing here, the check is still being hidden. I got it. That's pretty cool. <v ->Yep.</v> <v ->All right.</v> Well that's a really nice effect and I can see the animation is also nice that it's, yeah. Pretty slick. <v Lee>Right, but we can do a little better than that,</v> especially because we need to position that header now so that it's- Right now, it's just kind of stuck up in the top and it's pushing the logo down. So what we're gonna do here is we're gonna do some positioning and some sizing for this thing. So on the header nav, let's give it a different background color just to separate it, make it look a little like we're opening up something new. So we're gonna do like a dark gray, 444. We're also gonna box sizing border box this so that anything that we do with padding and height and all that just gets worked in. <v Michael>Okay.</v> Ah, it's already looking a lot better. It's actually fitting now. <v ->Yeah.</v> So we're going to do left zero because this is gonna be positioned on the left side of the screen. <v Michael>Right.</v> <v Lee>That's not gonna do anything</v> 'cause it doesn't have a position yet. <v Michael>It needs position. I got it.</v> Yeah, no, this is good 'cause this is reinforcing these things for me. <v ->Let's go ahead and add the position.</v> So position absolute and we can also add the top. So we're gonna put this at 10 view height so that it's actually right below the main header. And so now- <v Michael>Where does that 10 come from?</v> <v Lee>The 10 is the height of the logo in the header.</v> <v Michael>Ah, okay.</v> <v Lee>So that's the height of the header.</v> So now watch what happens when you click that menu. Oh, there we go. <v ->Ah, look at that.</v> <v Lee>But still not quite there.</v> We've got the width that we can add so we can make this a hundred view width. <v Michael>Just a hundred percent?</v> <v Lee>Mm hm, we should also, while we're there,</v> just add the Z index just to make sure it's on top of other content. We'll do nine on this thing. So now let's check it out and see what it looks like. Ooh, starting to get better. <v Michael>Yeah.</v> <v Lee>At least it takes up the whole page now</v> and it kind of blinds down. It looks like it's coming from the bottom of the menu. <v Michael>Yeah, that's cool.</v> <v Lee>Let's text line center this.</v> <v Michael>Yeah, it's looking good.</v> Coming together and you can see... That doesn't work yet. (Michael and Lee chuckling) Getting ahead of ourselves. It's so exciting though. <v ->Yeah.</v> <v ->It's almost working.</v> <v Lee>So let's actually style the LI's now</v> and let's make that look nice before we move on. There's another pretty cool thing that we'll add in here using a pseudo element, but first, let's make the menu look nice. So header nav LI. <v Michael>Okay, so let's put it here</v> under header nav LI, right? <v Lee>Yep.</v> And so right now those were display inline block 'cause we had them horizontal. Let's change them back to being block and let's give them a little bit of margin on the top, 1em. <v Michael>You said margin top?</v> <v Lee>Mm hm.</v> And- <v ->Aha, look at that.</v> It's starting to look like a mobile menu. <v ->Yeah. The bottom one looks a little weird,</v> so let's actually use our last child pseudo class to add margin bottom of 1em so that's not right up against the border. <v Michael>That's here.</v> Right, so now down here, there's something nice. Yeah, I can see this isn't working yet. <v Lee>No.</v> <v Michael>So this space looks nice though.</v> <v Lee>Yep.</v> And you know, let's remove the color from that first one while we're doing pseudo classes, we'll do a header nav LI first child A and just say color white. <v Michael>Oh, yeah.</v> Equivalently, use the hex. <v Lee>And like you noticed Michael that the dropdown</v> doesn't really work, we could remake the whole dropdown so that it also fits within this, but for mobile, a lot of times you just want to get people to a destination, so you want to simplify navigation. So they want to go see blog stuff? Instead of trying to show them a whole bunch of different menu items here, just send them to the blog and let the page work. <v Michael>Right.</v> <v Lee>So what we'll do is we'll do</v> header nav drop trigger padding right zero. It's basically the same thing that we were doing before for the footer. And then we'll do display none for the header nav drop menu after. <v Michael>Right.</v> Yeah, so we saw this before with... <v ->With the footer.</v> <v ->With the footer.</v> Where was that? Was that...? <v Lee>It wasn't in the mobile.</v> It was actually up the CSS. There it is. But it's not in the footer section. We kept it, <v ->Oh, where was it?</v> <v Lee>Next to the drop menu styles.</v> It's just right there. Nope. Hold on, I'll scroll. Right there. <v Michael>Ah right, hide in the footer. Okay.</v> So we're basically just replicating this. <v Lee>Right, but only applying it to mobile.</v> <v ->Got it, and so just for the sake of parallel structure,</v> I'm gonna just change the order. <v Lee>Mm hm.</v> <v Michael>'Cause this is the pattern that we used before.</v> Like that? <v ->Sure.</v> <v ->Right, that's great.</v> 'Cause yeah, so now we can see that it's actually just the same thing as hiding it in the footer. In fact, maybe we can even do this. So it's hide in the nav menu? <v Lee>Mm hm.</v> <v Michael>Great.</v> <v Lee>Might wanna put hide dropdown</v> because here it's not in that section. <v Michael>Right, that's true.</v> <v Lee>All right, so now when we go back</v> and check out the page... <v Michael>Okay, let's check.</v> And, aha. Oh I see there's still... Did something not work there? I see the arrow. <v Lee>Drop trigger after.</v> Why is that still showing? Oh. (laughing) <v Michael>Oh, there's just a typo.</v> So did we need that? That's so funny. <v Lee>So this still hovers.</v> We can get rid of that. <v Michael>Okay. Did we actually need this after here?</v> No? We don't need it. <v Lee>Let me see what that does.</v> Let me see if that'll actually do it. Anything? No. Right, it was all one for dropdown. Yeah. <v Michael>Okay, so this is a more specific rule then.</v> <v ->Yeah.</v> <v ->Okay.</v> Some good progress. <v Lee>Right. So now if we go over here,</v> we've got four links and you don't have to worry about the fact that this doesn't have a hover state 'cause for mobile, there is no hover state. If you click these, it goes to the page. You know? It actually- <v Michael>Oh, I see.</v> When you say there is no hover state, like right now, we're in- <v Lee>Yeah, we're faking mobile</v> because we're in a browser. <v Michael>Yeah, in a real situation,</v> in a real mobile device, we wouldn't see this. It would just be clicking, <v ->That's right.</v> <v Michael>On the link, but it wouldn't change it.</v> <v ->Right.</v> <v ->In terms of color. Good.</v> <v Lee>So that's pretty good, but you know,</v> we can do still a little better. There's a pretty cool trick that we can use with our menu here. <v Michael>Okay.</v> So we can add some rules to the mobile menu check. <v Lee>That's right.</v> <v Michael>Right, it looks like</v> there's something we missed here with the menu. This is lowercase, right? <v ->Yeah.</v> <v Michael>Do we wanna make that uppercase?</v> <v Lee>Yeah, let's make that uppercase.</v> <v Michael>'Cause that'll that way</v> it'll match the styles, right? <v ->Right.</v> <v Michael>Okay, and so, where is that?</v> That's the show mobile menu? <v ->Mm hm.</v> <v Michael>So it's here.</v> All right, so we can just add the... We'll need to put it here 'cause they're out of order anyway. (Michael and Lee chuckling) It's gonna be a text transform? <v Lee>Yeah.</v> <v Michael>Upper case.</v> And I'll just do this here. F5, there we go. Okay, that's good. It's amazing how much better that looks, just that one little change. All right, and while we're at it, you wanted to make this font- Was it font weight bold? <v Lee>Yeah, let's bold it</v> so it looks a little more like the other menu items. <v ->Ah yeah, that's nice.</v> Okay. <v Lee>All right.</v> So now is when we're gonna use our little tricky trick and this is gonna be some fun stuff here. <v ->Okay.</v> <v ->Because normally,</v> there's no way to change the text of a menu like this, of the thing that activates it without using JavaScript. <v ->Without JavaScript.</v> <v ->Right?</v> <v ->Yeah.</v> <v Lee>Because you can't manipulate</v> elements of the DOM without JavaScript. That's just kind of how it works. But we're gonna do exactly that by using the checked pseudo class here so that when the menu is open, we'll make a change to the show mobile menu, which is the label that holds this, we're gonna use the after pseudo element and we're gonna use the fact that we can put text content in there. <v Michael>Right, which has been blank so far,</v> but we're going to... <v Lee>Right, so what we're gonna do,</v> the only time that we use text in there was when we were introducing the idea of the before and after and we put the B and the A in there. <v Michael>Right.</v> <v Lee>So what we're gonna do instead</v> is put close in there as in to suggest to someone that, you know, if you click that, it'll close the menu. And we're gonna set a background color that is the same as the background of the header so that you can't see the original menu through the after element. So it'll look like the text has been replaced, when in reality, what we're just doing here is we're gonna be covering it up. So... <v Michael>Oh, that's pretty, that's pretty tricky.</v> <v Lee>I'll actually leave the background color off first</v> just so that we can see how things are working here. What is it? 2F. All right, now we're gonna do content. Making it all uppercase, just to be certain here. <v Michael>Mm hm.</v> <v Lee>Zero 'cause we're gonna be positioning this.</v> All right, so this is just a minimum amount of stuff. <v ->Okay, let's take a look.</v> <v ->See how this goes.</v> When you check it, there you go. <v ->Ah.</v> <v ->So we've got an orange close</v> that's just in space up there. <v ->Right.</v> <v Lee>So we should position that better</v> and we'll also do the overlay. So the top, if we wanted to look in here, we could play around and figure out how to line it up. But it... (Michael and Lee laughing) <v Michael>Crossed the streams there, but we got this.</v> So now if I click, aha, it appears right on it. So this is the kinda thing you can use the inspector to find the right amount? <v Lee>Right.</v> Let's also set the width here to be a hundred percent of the element and text align center it so that it's positioned right in the middle of the parent. <v Michael>Right, that makes sense.</v> 'Cause right now it's displaced <v ->Right.</v> <v ->Off to the left, but here...</v> Aha. <v Lee>Now we're right on top of it.</v> So that- <v ->Great.</v> <v Lee>One last thing is set the background to black.</v> <v Michael>Yep.</v> So are we gonna...? Yeah, we've got the color right there, so... Or, whatever. <v ->Yeah.</v> <v Michael>Equivalently.</v> <v ->So now what we're doing is we're just</v> basically hiding the menu by making it the same color. Oh, look at that. Oh man, that is so slick. And so on a mobile device, you're just pressing this with your finger or your thumb. And it's so great, it just, it looks like it's animated. I mean, it is. It's this transition, right? <v ->Right.</v> <v Michael>That's this here, but it's the CSS animation.</v> <v Lee>Yep.</v> <v Michael>That's really cool.</v> <v Lee>So there are even trickier things that you can do</v> with this, but for right now, this is pretty good. You do have to click it to close it. So clicking over here won't, and that's one of those things that could get a lot trickier with, but it's not easy to make it all work right. So, yeah, I mean, it's pretty good for a mobile menu for a little site. <v ->Yeah.</v> <v ->Not too bad.</v> <v Michael>That's really amazing with the, surprise-</v> I mean, you know, it's kind of tricky, but it's not like a day of programming. <v Lee>Right, there's not JavaScript</v> that's involved in this. It's not like you're worrying about messing around with elements in the DOM. It just works. <v Michael>All right, that's great.</v> So we've got this and we can look at the, the main version or like the browser version. I say main version. I mean, mobile is so important these days. Some sites, that is the main version. So it looks like it's working in both cases. The footer works. Look at the footer here. Looking good. All right. So the final step then is just to deploy this, right? Okay, we added a bunch of things. Hmm. And there we go. Look at that. And I am gonna check it on my iPhone right now. Looks good. You know, there's one thing though, Lee, I noticed on my iPhone, the little vertical bars are appearing. Did we forget to remove those? See these? Oh, look at that. What happened? <v Lee>Oh, we forgot to add the, a style-</v> There needs to be a border for that. <v Michael>That's weird 'cause I could have sworn</v> that it was working just now. <v Lee>Yeah. Wait, hold on.</v> Everything is kind of screwy right now. That is the header nav LI. Let's check it in the inspector. <v Michael>Yeah.</v> <v Lee>So there we go.</v> So we have a padding left and a border left. <v Michael>Yeah.</v> <v Lee>And a margin left.</v> So we should turn all of those off. <v Michael>Okay.</v> So where is that then? That's the... <v Lee>That would be right here.</v> <v Michael>Header nav LI? This?</v> <v Lee>Mm hm, yep.</v> So we'll add... Well, let's first change the margin since it's already here. We'll change it to 1em00. <v Michael>Okay.</v> <v ->Then padding zero.</v> <v ->All right.</v> <v Lee>And a new one for...</v> <v Michael>All right.</v> It's weird. It looks like it's still appearing. <v Lee>Yeah, it is.</v> So this is actually a problem with specificity. <v Michael>Hmm.</v> <v Lee>So what we actually need to do here is this.</v> Oops. <v ->So, yeah.</v> So why wasn't it working? <v Lee>So the original style is more specific</v> because it's using this generic child selector. So by just doing the exact same thing here in our style sheet... <v Michael>Okay, let's take a look.</v> All right. And now I'm gonna do something really dangerous, potentially, but if you understand the danger, you can do it. I'm actually going to make an amending commit because this is really just something we already wanted in that commit. So, I'm gonna add everything and then I can do this. And so what this does is it opens it in my default text editor, which in this case is Sublime Text. And so now I've just wrapped that change into this previous commit, but if I tried to push, GitHub will complain. And that's because I already pushed up this commit. So this is super dangerous, what I'm about to do. This is called a forced push to master. You should only ever do this if you're a hundred percent sure that nobody else will have pulled it in the interim. So use with extreme caution, but I'm gonna push this up so that it's synced up at GitHub and now we can check it. And so this is the kind of thing where now I need to look on my mobile device and refresh it to wait for the cache to clear. And it's working. As one final step, let's open up that simulator that we were using before. All right, and now we can go to local host if we want, should work. And we can also go to the remote site. There we go. Is this centered? That's weird. <v Lee>So, I was looking at that</v> and I was just spinning up the server on my side. <v Michael>Yeah.</v> <v ->No really...</v> Oh, you know what? There it is. It's not that that one's off. It's that the other ones still have padding. <v Michael>Ah, okay.</v> (Lee grunts in frustration) So where do we undo that? <v Lee>Uh, in the same place</v> that we did this, the border zero. We forgot to move the padding zero over there. <v Michael>Okay.</v> So let's do that. This is a... That's probably right down here? Yeah. So border zero, padding zero? Like that? <v Lee>Mm hm.</v> Yay. <v ->Yay, all right.</v> So I'm gonna make another commit again. Don't ever do this unless you're a hundred percent sure that it doesn't matter, that no one else has pulled. So we made a few changes. I'm gonna do the same thing. Remember, this is really dangerous. Just gonna close that and then I'll push again. Okay, so that should work. Now we just need to wait for the cache to clear and it should be working. Looks good. All right, looks like it's working. Okay well, we went to quite a bit of trouble there to get everything to work at the end, but this is what happens sometimes when you're doing CSS. There will be some thing, just one thing or two things or a few things that aren't quite working and you just have to go through and use the inspector and track down what the issue is and then find the place in your file, change it, and update it. But the result is that we have a really nice menu that works on mobile, that works on a desktop, and this will let people navigate their way around our site, regardless of which kind of device they're using to access it.