By Carl Heaton

Although we already have a responsive menu, we are not quite done with it yet. As we reduce the width of the screen to 37.5em, Underscores automatically swaps our menu for a mobile menu, using media query we already examined in the previous lesson. Then, when you click on the button, JavaScript kicks in and displays our mobile menu.

responsive menu

The problem that we have here is that our menu works just in the same way our full-width menu does. We need to change the way the menu behaves on smaller screens, and this can be done through CSS and media queries.

For example, we need all our mobile menu items to appear vertically, instead of horizontally.

If you scroll down to the “Small menu” section of our style.css file, you will see the following media query:

menu-toggle

It dictates the way our menu behaves, and in particular, hides the mobile menu when we are at a screen wider than 37.5em. We would like to change these styles so that we can better control our menu. First, we will style our “menu-toggle” button so that it matches our design.

Find the .menu-toggle class (not the one in the media query but the one outside it, which applies to smaller screen widths) and replace it with the following style:

.menu-toggle {

color: white;

text-decoration: none;

display: block;

padding: 15px 40px;

background: #3b6a26;

font-size: 16px;

font-size: 1.6rem;

border: none;

}

Then go to the Forms section of our stylesheet and comment or remove the following lines of code. They just add extra styles to our buttons that we don’t need for our design.

button styles

Save it and refresh your front page. You should be rewarded with a nicely styled button that looks exactly like the one on the screenshot below:

menu button

However, our menu items are still stacked horizontally next to each other as you see on the first screenshot, and we need to address this. Copy and paste the following piece of code immediately after the first media query you saw above:

@media screen and (max-width: 37.49em) {

.main-navigation ul {

margin: 0;

}

.main-navigation ul li {

float: none;

}

}

Here, we are removing the “margin: auto;” property we previously set for the main menu and we are no longer floating the menu items to the left. If you have done the things right, you should see a similar result to this:

mobile ready

We can further refine our styles by adding a hover effect to our second level navigation items like so:

.main-navigation ul ul :hover > a,

.main-navigation ul ul .focus > a {

background: #3b6a26;

}

Just find the necessary selectors already present in your stylesheet and add the background color to them. The result should look like this:

second level navigation

And now, both our main menu and our mobile menu are complete and we can move on with the rest of this course.

Here is a list of all the other parts: part 1part 2part 3part 4part 6part 7part 8part 9part 10part 11part 12part 13part 14

carl68

About The Author

Carl

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.