Build a simple custom theme – Part 1

Step 4: Optimizing the navigation

The next part is modifying the navigation. In my opinion, this step is the most difficult.

Originally taken from the Twentyten theme, the CSS for the navigation in the basic theme has been tested and tweaked over and over again. I’ve tried to simplify it as much as I can, but the only way to fully understand how it works is to play with it. So go ahead, change the colours, change padding and see how it behaves.

In order to achieve the look provided in our design, the most important modification is to change the first part to:

#top_nav {
	float:right;
	width:600px;
	margin:48px 0 0 0;
}

This will float our navigation to the right of the logo, will reduce its width and will remove the background.

However, when you are tweaking and finessing the nav, you may want to leave the background colour in. During CSS changes, I find background colours and borders very useful.

Once you are happy with your navigation, let’s move on to the main body.