From the course: Creating a Responsive Web Design: Advanced Techniques
Unlock this course with a free trial
Join today to access over 22,400 courses taught by industry experts.
Relocating the nav element - CSS Tutorial
From the course: Creating a Responsive Web Design: Advanced Techniques
Relocating the nav element
- Now to complete this lesson, I'll be working with a copy of the project from the the previous course, called Creating a Responsive Web Design. If you've taken that course, you can use that project. If you have not taken that course, or you simply want to use the files in the exercise files, inside of the CH_01 there's a folder called starter_files. Inside here, if you open the index.html file up, I basically have a copy of that previous project with just the header and navigation elements. So, if we resize these, we can see the navigation element dropping below the content, and then if we widen this up, we can see our navigation menu. And for those working with a copy of the final previous project, you'll have not only the header and navigation elements, but the rest of the layout as well. So in either case, we have this seam-based structure for the heading and navigation elements that we can use to complete this lesson. Now, on my desktop, I have a copy of the previous project in a…
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
-
-
-
About this lesson46s
-
Relocating the nav element4m 33s
-
Adding a mobile link button4m 43s
-
Removing the header height restrictions2m 2s
-
Restyling the mobile menu2m 22s
-
Adjusting the logo to overlap the menu3m 58s
-
Adding JavaScript and jQuery to your project5m 32s
-
Attaching a click event to the mobile menu button4m 4s
-
Animating the height of the navigation4m 51s
-
Removing the style attribute from the nav element5m 21s
-
Where to go from here25s
-
-
-