I started using the GreenTrack theme for the site because I liked the layout and cleanliness of it. While it served most of my needs I needed to modify some things, mainly change the header image, remove the default nav link, and build a navbar which sat below the header image.

The first thing that I had to do was change the default header image. I opened up the style.css file and scrolled down to the entry #header. In this I changed the path to my image and changed the height to to reflect the height of my image.

The next thing I did was to remove the default nav link in the header since my image already had a logo embedded. I opened up the header.php file and removed the line in the div element. This would now draw the 125 pixel header image only.

Since I now had no links and I wanted to build a navbar below the image, while I was in header.php I added in a new div element (with id=navbar) with 2 tags in it.I then went back to the style.css file and created styles for the #navbar object.

This created the navbar, 25 pixels high
#navbar {
height 25px;
margin: 0;
padding: 0;
}

This set the links to have no underline and to be the same color as the links in the theme. I also added some padding and a grey line to the right as a separator.
#navbar a {
color: #8a3207;
text-decoration: none;
padding-top: 3px;
padding-right: 8px;
padding-bottom: 3px;
padding-left: 8px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ddd;
font-weight: bolder;
}

For the hover I inverted the colors so the background would be the link color and the link color would be white.
#navbar a:hover {
color: #fff;
background-color: #753206;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ddd;
}

At that point I had a spiffy navbar that had two links right below the image!

Advertisements