Setting up the mobile nav button

Now we're going to work on changing the navigation and experience based on small screens. So let's come back to our text editor. First, let's go into our index.html file. Let's scroll down. Let's find the div with the ID of hero. Let's hit a Return. Let's come in here and add an anchor link for our mobile menu. So, a space. Lets set a class of mobile_menu, let's end the tag and let's end the element. Now we're also going to want to have the navigation open up as if its a menu, now to do this we need to collapse this navigation element here, we need to have the container inside of here that we can check the measurement off. So what we're going to do inside of the navigation is let's hit a Return and add a div element inside of here. So before the very first anchor link, add a beginning div. After the last anchor link, let's add an ending div. I'm going to come in here and tab all of these in. So later on in the course when we determine the height of the navigation, we're going to check the height of this element, which is going to be collapsed inside of this particular element. And we'll know how tall we need to open our navigation for people on small screens. Now with these changes made in the HTML, let's switch over to our screen layout large.css file. Let's scroll down to the bottom of the document. Let's add a rule called a.mobile_menu. Beginning and ending brackets. Let's set a display of none. So what is this going to do is hide the mobile menu from all screen sizes. In this earlier course, we used the screen layout large as the default layout for all three different states and what we're going to next is to turn this on for the small screen. So, with the changes made in the large screen here. Let's go over to our screen layout small.css. Let's scroll down to the bottom of the document. And let's come in here and define what are mobile menu's going to look like for small screens. Let's start by typing a.mobile underscore menu, sort of bracket, first property's going to be display. We're going to set this to block. Next we're going to set a width. Like 30 pixels, next we will set our height of 34 pixels, next we're going to set border-top, we use shorthand style two pixels style is solid #fff for white, then we're going to set border left, same properties as before. Two pixels, solid and white. Then border-right. Again the same settings, two pixels, solid and white. Next we're going to set border-top-left-dash radius. We're going to set this to six pixels. Next, we'll set the top right radius. We'll set that to six pixels as well. Next, we'll set the background. The color's going to be #a6430a. URL ../ to come out to root /images, /mobile_link_menu.png. Then we're going to set no repeat, then four pixels on the x position and four pixels on the y position. Next we're going to set the position to absolute. We're going to set the top property to 64 pixels. We'll set the left property to ten pixels. And then finally since we don't have an href on here we are going to set the cursor to a pointer, next we'll define a selected state for the mobile menu when its open so a.mobile_menu.selected and we are going to set background position to four pixels on the X position and negative 26 pixels on the Y position. Now with these in place, let's hit Save. Let's switch back to our browser, let's hit Reload. I'm going to collapse my browser down to our small screen size. And once we get to our small screen size, we can see our mobile menu button showing up here showing up here right above our navigation. Now that our navigation button is showing properly, next we'll work on setting the navigation state so that when we're on the small screen, we'll hide this, and we'll show it on larger screens.