Join Chris Converse for an in-depth discussion in this video Setting up the mobile nav panel, part of Creating a Responsive Web Experience.
Right now, our navigation is showing, whether…we're on large, small, or medium screens.…So what we're going to do next is set it up so…that if we're on small screens, we're going to hide the navigation.…Now the first thing we'll need to do…is change the way the nav container is behaving.…So let's come back to our text editor.…Let's go into screen layout large. Let's find our rule for nav.…And after the top of property, let's come in here and set a property of overflow and…set that to hidden.…Now with this property set, when we collapse our navigation element down…to a zero height, we wont see any of the elements inside.…
Save this file.…Let's go back over to design.js, let's scroll down into the load hero area.…So inside of the conditional statement for window size equaling large.…Let's come in here and let's target the navigation element.…So, we'll type dollar sign, parenthesis,…two tick marks for a string literal.…We'll type nav outside of the parenthesis .css.…Another set of parenthesis, and a semi colon.…
- Modifying the graphics
- Adjusting the CSS for the navigation
- Loading content with jQuery
- Loading alternate content based on screen size
- Animating the hero panel
- Maintaining support for Internet Explorer 7 and 8
Skill Level Intermediate
Q: I don’t see the original course in which this course is based. Where is the final project to the previous course?
A: The exercise files, both premium and free versions, now contain a copy of the previous course’s final project.