For my nav bar, I only had 3 pages so I wanted to make them interactive buttons for each page.

Here is the css and html for my nav bar. Like with the header, I will go through it and explain each bit:

This is the main nav container


<div id=”nav1″>
Here is the text for each of my nav buttons. The font style gives the text a yellow background. <strong>Puts everything inside the tags as bold text in the html standard form.
<p><a href=”index.html”><strong><font style=”background-color:#CF0;”>HOME</font></strong></a></p>

<div id=”nav2″>
<p><a href=”location.html”><strong><font style=”background-color:white;”>LOCATION</font></strong></a></p>

<div id=”nav3″>
<p><a href=”events.html”><strong><font style=”background-color:white;”>EVENTS</font></strong></a></p>



The dimensions of the nav bar holder match the container for width, and the height will stretch depending on the size of the navigation buttons

The background colour of the nav bar is set at black, but I think that the nav buttons cover this completely so you’ll never see the background

I have set the margin underneath the nav bar to 30px, so that anything underneath the div will leave a 30px gap between them. I prefer to have the margin just at the bottom to deal with things like this as it means the margin will not affect my positioning at all.

1.3em is basially responsive text at 1.3 times the standard text size. I’ve chosen Verdana as my font-family, and I’ve set text-align to center here so that all of the divs inside agree to these rules.
font-family:Verdana, Geneva, sans-serif;

I’ve just taken one nav button as an example, as all 3 are the same (bar one or two differences) and will have the same css


I have set the width of this and nav3 to 300 pixels, and the width of nav2 to 360 pixels. I tried doing 33.333333…%, but it kept coming out wrong, so I thought it was better to use a bigger one for the middle as it was a igger page title anyway! The height is auto as it will alter based on text size and position. 
width: 31.25%; /* 300 (originally 300) / 960 */
Float is left on 1 and 2 and right on 3 so that they sit on the same level.
This keeps padding and borders inside the specified width.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
These are the rules for the border, except these are outlined in yellow rather than black to make them stand out

This background is the background of the button and the one that will move when hovered over (rules below) I’ve used a picture of a chequered flag as the background. Overflow is set at hidden because you can’t see the whole image, just the piece that’s cut inside the nav button.
background-position: 0 0;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
font-size: 22px;
overflow: hidden;
display: block;
text-align: center;

Border radius settings, giving each button a curved corner of 5px
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Although barely noticeable, there is a shadow on each box spread out by 3px and 1px.
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

This is to do with the css3 background transition, meaning it will take 0.8s for all transitional movements to complete. 
-webkit-transition: All 0.8s ease;
-moz-transition: All 0.8s ease;
-o-transition: All 0.8s ease;
-ms-transition: All 0.8s ease;
transition: All 0.8s ease;

This is not a div, but it denotes a rule when you hover over the div. There is a rule for this on each nav button.

This basically means that when I hover over the button, the background will shift on the y axis by 150px, This is what gives the moving effect on the button
background-position: 0 150px;

here is what it looks like with these in place: