Repositioning the nav

- Now we're going to focus on the navigation elements.We're going to take the nested unordered listwe created earlier,and we're going to transform thisinto a menu system using CSS.Now if we refer back to our original design,we're going to have the navigation show upin 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 addour 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 dois target the nav element.So I'll type nav space,put in our { }.I'm going to split this openbecause 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 0pxand a left property of 0px.

Now since the navigation elementis sitting inside of the main page containeralong with the other section elements, header and footer,the navigation element will position itselfin relation to the page element.So if we set top 0 and left 0,this will go all the way up in positionover-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 becauseby setting an absolute position the navigation elementwill only be as wide as the content inside of it.And we want to make sure that the navigation elementis as wide as the page container.So setting a width of 100 will make sure thatthe 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 seeour navigation element is now positionedat the top of the page.

We'll also notice that the navigation elementis over top of the logo element.Any time we position items on a pageany HTML code that appears later in the documentwill appear higher than elementsthat 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 areawhere 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 fileeverything has a z-index of zero,however the stacking order is then definedby the order of the code.By coming in here and setting the z-index of the a.logoto a whole number this will nowbe 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 elementand 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 styleon those unordered lists.So we'll type nav space then we'll targetthe 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 marginand padding settings that browsers will addto an unordered list.Then back to the browser and we'll hit reload.So now we'll get a nice stacked list of allof 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 targetthe list items inside of the unordered lists,as well as the anchor tags.

Resume Transcript Auto-Scroll

Author

Released

11/9/2015

Discover how to use responsive web design to make your site more readable and efficient—on any device. Chris Converse shares his own specialized techniques for combining HTML and CSS into a web layout that can adapt to different screen sizes and orientations. The course takes the site from start to finish, from setting up the HTML page and containers to styling established elements for small, medium, and large screens. Along the way, Chris shows how to reposition the nav bar for better viewing on mobile devices, create animated transitions, and turn bulleted lists into interactive menus with full touch support. Plus, learn how to use CSS pseudo-elements and adapt layouts for print to save ink and paper.

The exercise files for this course are free to all members. Download them and start creating your own responsive websites today.