Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry
Skill Level Intermediate
When dealing with responsive menus, especially for smaller devices like phones and tablets, you may need to think of providing alternate styles rather than just resizing or reorganizing of layouts. Even though a menu might be easy to click on with a mouse, it might be harder to click on when you use your thumb or your finger on a touchscreen device because the menus generally are really small when you have them on a regular screen. If you look at the original design, you will see that I intended the menus on smaller screens to be these large buttons that are below the main header so that they're separated clearly menu items and they are easier to click on.
So what I want to do is create new styles in the media queries that completely restyle the menu in the page. I will show you how I do this by using the Chrome Developer Tools. By using the Chrome Developer Tools, I'm able to experiment with the live code on the page and then I can change only those elements that need to be changed and nothing else, to make my style code as short as possible. The first thing I am going to do is reduce the width of the screen until I hit that point where I want things to change.
Then I'll use the Developer Tools to identify the area I want to change. The first thing I want to do here is change the background color to white, because I know that I want all this area to be white. So I will go and identify the entire area, which is the ID access down here, and then I see the media query has already kicked in here, so that's where I want to add my changes. The first thing I want to do is add a new background color, so I will say background:fff, which is white. And now I see the white kicks in; however, the menu is floating in the space sort of.
I want the menu to span all the way across and all the way to the bottom. The reason why it's floating in space is because the menu is further contained by this divider that's called header_margin, and header_margin adds 20 pixel padding around the whole header. So what I need to do is override what header margin is doing. So I will go back to access and I'll add some extra style code. I will say margin and then I first want to add some extra space at the top, so I will say 20 pixels. And then I'll set the right bottom and left margins to -20 pixels to override the styling from header margin.
So I will say -20 pixels for the right, -20 pixels for the bottom, and -20 pixels for left. And now you see the menu appears to hover underneath the main header, even though it technically is still part of the main header. And of course, you can't see the buttons right now, because they are white, and we will get to that in a bit, but first I want to save what I just did in my actual style sheets. I will highlight it here. I will go to my style sheet and find that style. It's all the way here at the bottom, inside the media query for 719. And here we have access.
So I will simply replace access with the new code I created, clean it up a bit, and then I will also make a comment for myself so I know what's going on here. Save it, reload the page, and now the menu is at the bottom. The next thing I need to do is make these menu items visible again, so I will select one of the menu items and then look at the styling that affects it, and I see here, under access a, that the color is set to white.
So if I just go and change that to #333, for example, I get this nice gray color instead, so that's probably what I need to do. In addition, if we look at the design, you will see that these menu items have padding on the top and on the sides. So I will go and add that padding. So I will change the padding here from what it is, to 10 pixels on the top and bottom and 25 pixels on the left and right. So now you see my menu items are much larger.
So before I do anything else, I am just going to save this. I am going to create a new style called access a, with a new padding and a new color. So I go down here again, add access a, padding: 10 pixel, 25 pixel, color: #333333, and close the style. I will save that, reload the page to make sure it works, and now we have those elements in the right color.
However, you see that the hover state is white, and we don't want that. So, I am going to go back and add that hover state as well. So I will go access li:hover > a, and access li:hover > focus, then set the color to #000, which is black.
Now you may wonder why I am using this code, access li:hover, to a, instead of saying access li: hover. That's because in this theme you have a dropdown menu, and you want the style to also take effect if the dropdown menu is activated. So I will save this, reload the page again, and now you see, if I hover over the menu, you get a subtle difference in the color of each of the items. Going back to the design reference again, we see that we also have a border around each item.
So I will go back, and I will find the list item, and I see that in addition to adding the border, I also have to get rid of that extra margin. So first I will set the margin to 0. That way each of the menu items stacks closer together. And then I will set the border-right to 1px solid, and the color #e5e5e5, and I'll copy that style out and set border-bottom to the same thing.
Now you see we have a nice clean menu that appears where it is supposed to and that also reorganizes as we scale the screen up and down. So I will copy out the style, find access li:, and replace it, clean up a bit, save it, reload the page, and here we have a fully functional responsive menu that only pops in when the screen gets small enough.
Now, there are a couple of additional things you need to do to make this menu responsive. In particular, you also need to address the dropdown elements. So what I've done is, in the exercise files for this course, in the code_snippets, you will find the complete code snippet for this movie so that you can add all the additional styles. It's not that many, but there is a couple. So if you go down to movie 6.2 and you simply add in all the style code here, jump menu down, all the way down to access ul ul, and replace what you just did, save it, and reload the page, you will get the same result and now the menu will work perfectly in all scenarios.
By providing a separate style set for smaller screens, you can create a whole new look and functionality for the menu without having to touch the underlying markup in the process. Pretty nifty, right?