Time for action—styling the new mobile menus

Let's edit the CSS to get our new mobile menus looking good. Perform the following steps for doing so:

1. 1. The first step is to style the top menu so that the links appear side by side. This time in the media query for screens with 480px of width or less, we will add the following code snippet:

   #access #menu-mobile-top li {
   width: 23.5%;
   margin-left: 2%;
   float: left;
   }
   #access #menu-mobile-top li:first-child {
   margin-left: 0;
   }
   

   We will now have a row of tappable links next to each other.

   Note

   WordPress automatically generates an ID for each menu we add—#menu-mobile-top in this case. This is comprised of menu- (which is automatic), plus mobile-top (which is the name we gave to our menu on the Menus admin screen).

2. 2. Next, we need to remove the space between the menu and the content. This is actually due to some padding on the #main element, so we add some styling to change that in our media query:

   #main {
   padding: 5px;
   }
   

Having done that, our menus should...