From the course: Creating a Responsive Web Experience
Join today to access over 22,600 courses taught by industry experts.
Setting up the mobile nav panel
From the course: Creating a Responsive Web Experience
Setting up the mobile nav panel
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.