From the course: Creating a Responsive Web Design

Moving the navigation for smaller screens - CSS Tutorial

From the course: Creating a Responsive Web Design

Start my 1-month free trial Buy for my team

Moving the navigation for smaller screens

“

- Now for much smaller screen displays, typically hand-held devices, we're going to start to make some additional changes. We're going to do things in this chapter like remove columns, and stack them vertically. And we're going to restyle and move the navigation. Because, on a small screen, if we have this many navigation items at the top of the screen, somebody might be tempted to click a navigation item before reading the content. So based on this design, I want to make that change to a small screen, basically one column layout, at about 625 pixels. So let's first go to our CSS file. Let's come up and copy our media query for 760. Let's scroll down. Let's paste this at the bottom of our screen. Change 760 to 625. Let's come in here and let's first, change some of our heading styles. So we'll target our h1 tags. We're going to set the font size here to 1em. Next, the h3 tag. We're going to come in here, and we're going to reset the margin-bottom here to 0px. This way the h3 tags will sit just on top of their paragraph elements, or any other content inside, we won't have an extra space. Next we'll target our anchor tag with a class of btn. And we're going to come in here and change the font size of these to .9em, so just 10% smaller than the base font. Next we'll make changes to the header. So I'll just come up here and copy that comment name. Let's target the main header element. We're going to change the height, we're going to set this to 160px. That's the size of the third largest banner graphic. We're going to change background-image again. So let's set a new property for the background-image. Url. So ../images/ banner_625.jpg And then for the next property we're going to reset the background-position. We want to have the image anchored to the left, on the position x, and anchored to the top, on the position y. And then next we'll make changes to the navigation element. Here we're going to change the position value from absolute to static, so the navigation will show where it actually appears in the html code. So I'll copy my comment, then we'll write a rule. We'll target nav, put in our brackets. We'll set position value to static. And now that we've removed its position value, we can also reset the width back to auto. By default, the navigation element will automatically be as wide as its parent. So we no longer need to override that with a width property of 100%. And next we'll set some padding properties. So we'll set 20px on the top and bottom, and 15px on the right and left. And then finally we'll reset the background-color. Now since the navigation is not going to be semi-transparent black on top of that reddish blackground banner graphic, we're going to need to set a color here. Otherwise, that semi-transparent black color will be against white, giving us a gray. So we're going to come in here and use hexadecimal and we're going to pick a dark red color. So we'll set the value of background-color to #4b for red, 0a for green, and 0c for blue. And now let's go see our progress in a browser. We'll hit reload, bring the size down. When we get under 625, we'll now see that our navigation is now moved down to the bottom. So if we scroll down we can now see all of the items showing up down here. Now we don't want to have a drop-down menu, so we're going to restyle those individual elements later. But you will see that the navigation is now changing. From being positioned at the top when we are above 625, to now a position value of static, which means it will display in a browser matching where it displays in the html code. So now with our navigation element out of the way, next we'll continue styling the header area, for screens under 625 pixels wide.

Contents