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.
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:
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:
[code language=”css” 1=”true”]
.menu-toggle {
color: white;
text-decoration: none;
display: block;
padding: 15px 40px;
background: #3b6a26;
font-size: 16px;
font-size: 1.6rem;
border: none;
}
[/code]
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.
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:
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:
[code language=”css” 1=”true”]
@media screen and (max-width: 37.49em) {
.main-navigation ul {
margin: 0;
}
.main-navigation ul li {
float: none;
}
}
[/code]
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:
We can further refine our styles by adding a hover effect to our second level navigation items like so:
[code language=”css” 1=”true”]
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
background: #3b6a26;
}
[/code]
Just find the necessary selectors already present in your stylesheet and add the background color to them. The result should look like this:
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 1, part 2, part 3, part 4, part 6, part 7, part 8, part 9, part 10, part 11, part 12, part 13, part 14
