From the course: Creating a Responsive Web Design: Advanced Techniques

Restyling the mobile menu

- So, now we're going to restyle the small menu, and then we'll set it to hide so that we can later on show it with JavaScript. So, first let's do the restyling. So, back to our CSS file, let's scroll up and let's find the media query where we set a max width of 625. So, right here. Let's scroll down. Let's find the navigation element, and what we're going to do here is we're going to look at the anchor tags inside of a list item inside of an unordered list. So, we're going to look for this rule here. So, what we're going to do is come in here and change some of the properties. Let's come down here and change the padding property. Instead of eight pixels on the top and bottom and 15 on the right and left, we're going to come in here and set six pixels on the top, 15 pixels on the right, six pixels on the bottom and two pixels on the left. Next for border, we're going to set this to border-bottom. We don't want to have a border around all four sides. We just want one to separate each item. And two other properties you want to check in your project, you want to make sure that the width is set to auto, and you want to make sure that if there is a border-radius, to remove that as well. So, with these in place, back to the browser. Let's hit reload, and now we'll have a small screen navigation list that will look a little bit more like a menu and less like mobile navigation buttons. So with this in place, the last thing we need to do is hide the mobile menu. So, back to our CSS file. Still inside of the medi-query, with the screen size of 625, let's find the navigation main element here. Let's come in, and let's add two additional properties. Let's come in here and set a height property of zero pixels, and then we're going to come in and set an overflow property of hidden. So what this is going to do is make sure that all of the content is still showing up in a navigation element, but the height of a navigation element is going to be set to zero. Later on, we will animate the height of the navigation based on the height of the content inside. But for now, if we go back to the browser and hit reload, this will serve the purpose of hiding our navigation content. We'll still see the mobile menu icon showing up here, but the entire mobile navigation that does show on small screens is now being clipped or hidden by the fact that a navigation element has a height of zero. So now with this in place, the last thing we need to do is make some minor adjustments to our logo before we start adding in some JavaScript.

Contents