Alrighty, so the other approach I'm going to show for the mobile navigation is creating an additional nav element with duplicate links. We would toggle between showing that version and the desktop version using media queries, we're going to use a hamburger menu icon which is the most traditional look for mobile navigation. So this is an equally valid approach, and this is what I've actually implemented on my own website. The previous option is definitely more unique, but I will leave it up to you to decide which you'd like to employ. I'll be going forward for the rest of the course with this option. So I searched for animated hamburger menus online.

Working as a developer involves a lot of googling and learning different approaches and solutions that already exist in deciding what is best to implement. I found this approach on w three schools, which is a great site, they have a lot of different resources that are very simple and easy to learn quickly. And so I'm going to be using their version here. So something very similar to this. And you can see that it tells you step by step, what to do. This is the HTML, this is the CSS for the animated one, it's a little more complicated.

So we're actually going to be copying this a little bit later, because we're going to use the animated version. And then we're also going to have to write a function to actually make it animate. All right, so let's go back into our code for now. So let's go back to our app component, most of our CSS is valid, but we actually don't need as much of a padding top on the project's title. We only did that because of the previous navigation. So we're going to drop that down to 20 from 50.

And now we'll move on To the close this for now we're going to work on the nav menu, CSS and HTML. Okay, so the first thing we're going to do is we're going to get rid of all of these media queries. And the next thing we're going to do is we're actually going to increase this. I mentioned before that we want to be able to target iPads of most sizes with our mobile navigation. So that's why we're increasing this to accommodate that as well as all mobile phones. And the first thing we're going to do, we're going to target three classes at once.

Sidebar container, comma, sidebar, toggle, comma, and desk, desktop nav, and we're going to give all of these display of none. So this is how we're going to display or not display our desktop navigation and mobile navigation. Alright, so let's go now into our HTML. Make this a little bit bigger for now. So we're going to want to move this down. So we're going to come in a title here.

And we're going to go above it. And we're going to start out by commenting out a title for you hamburger menu. And we're going to create three div elements inside of a container. First, the container will be a class of menu, container and it will also have an ID of menu, dash bars. Okay, and inside of that we'll have div dot bar one. And then on the next line div, dot bar, two, and then div bar three.

So these three bars are the three lines in our hamburger menu. Okay, so that's it for the hamburger menu, HTML. Let's go back to our site here and we're just going to copy all of this CSS over. Okay, and back to the code. Let's close this for now. Let's just do it this way.

Okay, so we're going to go down and just comment out a title for our hamburger menu, and then we will paste that below. So we're gonna have to make a few modifications. The first is instead of container, we're going to change it to class name menu container to match what we had in our HTML. We're also going to give it a position fix, because we want it to stay the top. And we're also going to give it a z index of 12. Just to make sure that it's on top of everything.

So the background color of our most of our website is dark. So we're going to want to change the bars color. So you can change the color of the bars to be anything that you want. But I'm just going to use white. Alright, so let's check that out. Okay, so we've got some decent looking bars here, but I think it would be better if they were in the top right, because I think that that's easier to reach than the top left.

So let's go back and target our menu container. And let's give it a top of 10 pixels and a right of 15 pixels. Okay, let's check that out. All right, I think that that's looking a lot better. Now time to move on to making the menu itself. Okay, so back in our HTML, we're going to comment out a another title for our actual mobile navigation.

So inside of this, we're going to create a nav element with the class of mobile dash nav, and an ID of mobile dash Okay, and inside of this, we're going to create an unordered list. And we're going to give it the class nav dash items. And inside of this, we're going to copy our list from our previous navigation. Okay, now back in our CSS, we're gonna start styling some of this stuff. So we're gonna go down here come into title, just snip application. And we're going to start by targeting our mobile dash nav class.

We're going to give it a position fixed a top of minus 16 pixels a left minus 16 a left of minus 50 pixels. a width of 112% of the screen is z index of five. So these are what worked for me to make sure that it stayed right at the top that the text was centered and that it was wide enough to cover the whole screen, you might need to experiment with your settings on different devices. So just keep that in mind. Next, we're going to target our nav, dash items, class and we're going to give it a display, flex. Flex direction, column.

So that's going down a text align of center and lastly, a list style type of none So that we get rid of the bullet points on our list. All right, next, we're going to target our nav items, list elements themselves. And we're going to give this a text transform uppercase. And we're going to just make sure we have the right font here. So that is this guy. UI, comma Song saref.

We're going to give it a padding 10 pixels. So that'll be all around the text in our list. And we're going to give it a margin left 10 pixels and send an effort to continue centering it and then lastly, we're going to give it a background color of kind of black But you'll be able to see through it a little bit. Alright, so let's check that out. Okay, so you can see that it's kind of see through. And we have our menu here, it's centered.

It's the full width of the phone here. And yeah, I think it's looking pretty good. The one thing we'll need to change is we don't want these to be this purple, like clicked on link color that is, in our browser, by default, we're going to want to change that to white. And we're also going to want it to be kind of inverted when we click on it. So this black bar for the contact will become white as well. To start doing this, we're going to go back into our CSS, and we're going to create a note let's do we can do it here.

Let's do mobile nav target targeting the eight elements specifically. And we're just Gonna give that a color of white. And then when we are hovering over our oops, mobile nav a hover. We're going to invert our colors. So we're going to give it a color of point eight, five. And then we're going to give it a almost white but not quite white to color.

Not pure white. Anyway. Okay, so let's do the same thing for our nav items list. Because we want to target the text, and then the background of the text. That's why we need to do both of these. And what we're gonna do is, we're just going to copy This Okay, so let's check that out.

Okay, cool. So you can see that when we click on it, our colors get inverted. That makes it look a little bit more dynamic. All right, very cool. So, the one thing is that the white here blocks out the hamburger menu now, and we can do something to fix that. So a trick is to just add an extra list element above this that is blank.

So let's do that now. So we're just gonna add a list and we're gonna give this one specifically, a style of padding top and 48 pixels. All right, so let's check that out. Okay, so that's looking better when we click on the top one, we have a nice distance away from our icon here. Okay, so the one other thing to consider is that when our menu is disengaged, so we can actually just delete it to show, our hamburger menu will disappear if we have a white background or whatever color you have if it blends into the background. So in order to fix this, we're going to target all three bars and we're going to give it a border on the top and a border on the left and then some shadow box shadow on the bottom and the right.

So let's go back into our CSS go down to our hamburger menu here. And we're going to start by giving a border top of one pixel All solid and then we're also going to use our black that is half see through. And we're going to copy this and we're going to target our border, left and paste that. And for the box shadow, we're going to do two pixels, two pixels, two pixels, RGB a, and this is going to be point five as well. So feel free to look up what each of these mean. But essentially, it's pushing it down to pixels to the right two pixels and has a spread of two pixels in this case, but there's actually an additional parameter you can add if you want to.

So let's check that out. Okay, and again, we're gonna have to delete this to see it. Okay, so that's looking a lot better. We can see it on our white background. And then when we go into our dark background, it just looks white. Okay, perfect.

So in the next one, we're going to look at actually making our mobile navigation function. So we're going to be switching between the x and then the full hamburger menu icon. And we're also going to be on that same command, either showing the menu or hiding the menu. Alright, so I'll see you in that one. Bye for now.