From the course: Creating a Responsive Web Design

Repositioning the nav - CSS Tutorial

From the course: Creating a Responsive Web Design

Start my 1-month free trial Buy for my team

Repositioning the nav

“

- Now we're going to focus on the navigation elements. We're going to take the nested unordered list we created earlier, and we're going to transform this into a menu system using CSS. Now if we refer back to our original design, we're going to have the navigation show up in the heading area behind the logo. And what we're going to do is, we're going to reposition the navigation element, which is showing up after the third section element, and position it above the heading element. So back in our project, let's go back to our CSS file. Let's scroll down. And I want to make sure that we add our navigation before the footer. I like to order my CSS in the order that the HTML goes. You don't have to do that, but it's just a preference of mine. So above the footer, I'll add a navigation CSS comment here. I'll add in some lines. Now the first thing we're going to do is target the nav element. So I'll type nav space, put in our { }. I'm going to split this open because we're going to add a few rules here. So the first thing we're gonna do is add a background color. So we'll choose background-color, we'll use the rgba color space. I want to use the semi-transparent black color. So put in our ( ); inside we're going to set 0 for red ,0 for green ,0 for blue , and then we're going to set that to .65. Next we're going to set a position of absolute, next line we're going to set a top property of 0px and a left property of 0px. Now since the navigation element is sitting inside of the main page container along with the other section elements, header and footer, the navigation element will position itself in relation to the page element. So if we set top 0 and left 0, this will go all the way up in position over-top of the heading area. On the next line we'll add padding, we're going to set 50px on the top, 0 pixels on the right, 0 on the bottom, and 0 on the left, and then finally we're going to set a width of 100%. Now the reason we need to set a width here is because by setting an absolute position the navigation element will only be as wide as the content inside of it. And we want to make sure that the navigation element is as wide as the page container. So setting a width of 100 will make sure that the navigation element is as wide as its parent, which again is the div element with an ID of page. So with this in place let's hit reload. Now if we scroll up to the top we will now see our navigation element is now positioned at the top of the page. We'll also notice that the navigation element is over top of the logo element. Any time we position items on a page any HTML code that appears later in the document will appear higher than elements that are defined earlier in the document. So to alleviate this let's go back to our CSS, we're going to scroll up and let's find our header area where we have our logo. So here's header a.logo. Let's come in here and let's add a z-index. And we'll set this simply to 1. So by setting a z-index we are basically rearranging, or changing the stacking order of this particular element. Since we haven't used a z-index at all in our CSS file everything has a z-index of zero, however the stacking order is then defined by the order of the code. By coming in here and setting the z-index of the a.logo to a whole number this will now be the highest element on the page. So now if we go back to the browser and hit reload, Everyday Things will now be above our navigation element and even the unordered list which you can see here. So now with these two elements set up, let's go back to our CSS. Let's scroll back down to the navigation area. Let's hit a return, and now let's take away the bullet style on those unordered lists. So we'll type nav space then we'll target the unordered list inside, put in our { } then we'll set a property called list-style. We'll set this to none, that will take away the bullets. Next we're going to set a margin of 0 on all four sides, and a padding of 0 on all four sides. This will take away any of the default margin and padding settings that browsers will add to an unordered list. Then back to the browser and we'll hit reload. So now we'll get a nice stacked list of all of our unordered lists showing up in the navigation element, which is now positioned over-top of the header element. So now with this in place next we're going to target the list items inside of the unordered lists, as well as the anchor tags.

Contents