All righty, so now we're gonna look at the mobile navigation. There's two ways I'm going to show you how to do this one is the alternative way that I've just kind of modified the desktop version a little bit, and the other is a traditional hamburger menu. So we're going to do the alternate first. And what we're going to do is we're going to make this font smaller, we're going to move this closer to the top left. And we're going to also change the padding on this so that it matches. And we're also going to move this up to the top left.

Alright, so let's get started. So in our code, make sure that you have the nav menu component HTML and CSS files open. I'm actually going to open a second pane of the CSS file again. So we can look at most of our stuff right here. And I'm going to go to the bottom and I'm going to comment out a title for our media queries. So we're also going to give this a media screen and bracket max dash width of 600 pixels.

Because for right now we're just looking at our mobile device. We will change it when we do our iPad version. We want to make it a little bit bigger. But for now, we can just target our vertical smartphone. Okay, so looking at the CSS on the right, we can see that our sidebar toggle has margin of 40 pixels. This is what's moving it away from the top and left at the screen.

So we're going to cut that in half. So we're going to target our sidebar toggle. And we're going to give that a margin of 20 pixels. Okay, so let's check that out. Okay, that looks better it's closer to the top there. Next, let's fix the font size for our actual menu.

And we can see that our sidebar items is a font size three REM so let's bump that down to to room. Okay, let's check that out. All right, so that's looking more of an appropriate size the page that we're gonna want to adjust the padding on this, the top has a little bit too much. So let's go back to code. And you know what, let's just drag this over give ourselves a little more space here. All right, so we can actually copy the padding from our sidebar items list into our sidebar toggle.

And let's check that out. Okay, so we can see that this is the width is a little bit off, we need to actually add some width because our padding used to be 10 pixels, and now it's it's 14 on the left and the right. So we're going to need to add some eight pixels to our width, we can see our width here is 112. So we're going to give that a width of 120 pixels. All right, so let's go back and take a look. Alright, so that's looking better.

The next thing we need to do is line these up. So we're going to need to modify our sidebar items. Here. So let's give it a top of minus five pixels. And we'll give it a left of minus five pixels. And then if we don't know what a value should be, you can figure it out by just adjusting this.

So I think we need to go up a little bit. So let's do that. And we definitely need to go over quite a bit. Okay, so let's say that and let's see, case we're still a little bit off. So we need to go a little bit further left, and I think we need to go a little bit higher up. So let's do that.

And let's see. Okay, let's check that. All right, perfect. So you can see it looks like it just doesn't move. It just goes right into the other. They're anchored in the same top left point.

Perfect. So our top is Minus 12 pixels and our left is minus 20 pixels. And we're putting that on our sidebar items. Let's go back to the code and do that. Okay, so we're gonna give it a top minus 12 pixels and a left of minus 20 pixels. Okay, so let's go back and check that out.

Make sure it's looking good. All right, perfect. All righty, so you can see that our nav menu has been working. Because in a mobile device, a hover over becomes triggered by someone tapping on it. The problem is that our sidebar container is now too big. So we're going to need to make it smaller like if you click over here, you're going to trigger the menu, which is not what we want.

We want it to be a little bit of a smaller area that you're clicking on. So let's go back to our code, and we're going to actually uncomment out this background color, there was a reason that we kept it. And if we go back, we can now actually see that if you click anywhere in here, that's going to trigger the navigation. So that space is definitely too big. So let's target that. And we can adjust it in our developer tools to see what the right size should be.

So let's go with a height in pixel values. So let's go with 100 pixels. Okay, that's looking a little bit better. And let's go with a width of 200 pixels. Okay, so I think it could be smaller both ways. We want to kind of frame it around our navigation a little better.

So let's just see what looks good here. Okay, so I think around 161 62, let's say I think that looks good. It's nice and balanced there. And let's change this. Yeah, I think that looks good. So, yeah, 9162 Yeah, so it looks good.

So now when we click outside of here, nothing is gonna get triggered. It's only when we get right into this area, it's actually going to trigger the navigation. So that's working a lot better now. Alrighty, so we're going to change our height to 90 pixels, our width to 162 and remove our background color. So we're going to start in our media queries here. And we're going to add our sidebar container.

And we're going to give it a height of 90 pixels with 162 pixels. And then we're also going to get rid of our background color. Okay, so let's go back and check that out. So I'm going to test toggling the menu. Okay, so you can see I'm clicking over here. And only when I get very close to the trigger the menu, Okay, awesome.

We're almost done. Let's just go through and check to make sure how the menu toggle looks on each of our pages here. So we can see in the project's pages that it overlaps with our title here. So we're going to want to give some padding on the top to this title to push it down a bit. So we can go back into our app component dot CSS file. And we can close this for now.

And we're going to go down into our media queries, and we're just going to give our projects title a padding top of 50 pixels. Okay, so let's go and check that out. All right, so that's looking a lot better, it's clear of the menu there. And lastly, let's go down to our contact section and see. Yeah, I think that looks pretty good. All right, so I think we're finished with this approach.

And in the next video, we'll take a look at the more traditional approach of using a hamburger menu. All right, I'll see you on that one. Bye for now.