Join Chris Converse for an in-depth discussion in this video Restyling the mobile menu, part of Creating a Responsive Web Design: Advanced Techniques.
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.