From the course: Creating a Responsive Web Design
Unlock this course with a free trial
Join today to access over 24,000 courses taught by industry experts.
Rearranging the navigation - CSS Tutorial
From the course: Creating a Responsive Web Design
Rearranging the navigation
- Now we're going to work on restyling the navigation, and just like before I want to comment out the how-to section as well, so that the navigation that's showing up at the bottom of the screen will now show up at the top. So back in our text editor, let's go back into our index.html. We have our ending comment here after the section atmosphere. Let's come in here and cut that, and let's find the ending section tag for the How-To section, and we'll paste this down here. Back in the browser we'll hit reload, and now we'll have our header area, and now our menu system. So now let's go back to our text editor, screen_css, let's scroll down. We started our navigation earlier because we wanted to re-position this away from the header, so we could style the header. Now we're going to come in here and change the way the navigation works when we're under 625 pixels. So the first thing we're going to do is define a display type of block for a whole series of elements, plus we're going to…
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
-
-
-
-
-
-
-
Moving the navigation for smaller screens4m 4s
-
(Locked)
Adjusting to the logo and hero elements3m 46s
-
(Locked)
Rearranging the main and atmosphere sections4m 26s
-
(Locked)
Rearranging the how-to section5m 24s
-
(Locked)
Rearranging the navigation6m 7s
-
(Locked)
Adjusting the spacing of the navigation and footer3m 54s
-
-
-
-