From the course: Creating a Responsive Web Experience
Unlock this course with a free trial
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.
Contents
-
-
-
-
-
-
(Locked)
Determining the screen size with JavaScript7m 41s
-
(Locked)
Detecting a change in screen size4m 1s
-
(Locked)
Loading alternative content based on screen size3m 11s
-
Setting up the mobile nav button4m 6s
-
(Locked)
Setting up the mobile nav panel4m 7s
-
Opening and closing the nav panel7m 20s
-
(Locked)
-
-
-