Join Chris Converse for an in-depth discussion in this video Adjusting the CSS for the navigation, part of Creating a Responsive Web Experience.
Now, we're going to make some modifications to our HTML file.…So, we're going to come over here to index that…HTML and open this up in your preferred Text editor.…Now, inside of the HTML file, let's scroll down.…Let's find the navigation element. We can see it down here.…Let's come down here and select the…entire navigation element, including the anchor links inside.…Hit Cmd or Ctrl+X to cut to the clipboard.…Let's scroll up in the HTML. Let's find the header element.…Let's hit a Return, and let's pace…the navigation element directly after the header element.…This way the navigation will always follow the…header element through all of the different screen sizes.…Now with our nav element moved, let's come back to the my website project.…
Let's open up our CSS folder.…And let's open up screen layout large.css. Inside of here let's find the nav element.…Let's remove the position of absolute. We're going to…let the navigation now just flow with the rest of the HTML content.…Let's scroll down here to Large Layout Screens.…
- 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 Advanced
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.