From the course: Creating a Responsive Web Design

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Rearranging the navigation

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…

Contents