Thesis Tutorial: Funky Header Navigation

Sometimes one has the need to create a custom, or “funky” header navigation and today is the day for me. So I thought I would document the process of what I do to help you with a custom navigation challenge.

We want to create a vertical navigation as is seen below in the previous version of the website (click the image to see full size).

Screen shot 2009-11-02 at 12.19.47 PM

There is a bit of vertical navigation that is distinct from the main horizontal navigation that is governed by the Thesis navigation controls. To do this we need to do some custom programming.

So how do we add this navigation?

This has to be “hard-coded” navigation. This means we will be using custom_functions.php and custom.css to get both the function and form of what we are after.

First thing is to get the navigation we want to add in the form of an unordered list like this:

<ul>
   <li><a title="Link to the foleypod homepage" href="http://www.foleypod.com/" target="_blank">home</a></li>
   <li><a title="A link to our portfolio" href="http://foleypod.com/portfolio" target="_blank">our work</a></li>
   <li><a title="Easy way to pay foleypod" href="http://foleypod.com/payment" target="_blank">pay bill online</a></li>
   <li><a title="See who we've made very happy" href="http://foleypod.com/testimonials" target="_blank">what clients say</a></li>
</ul>

Now that we have the list defined we need to create the function to get this list to show in the right place of the header.

Thesis function time

Picture 36

Before we add anything here is what the space looks like where we are going to put this navigation. The header already has a background image applied and our navigation is going just to the right of the white line.

Now we are going to create a function that will tell WordPress/Thesis to insert the navigation that we have defined above. Here is the function without the ‘guts’ of the navigation:

function custom_banner_nav() { ?>
<div id="custom_head_nav">
..........
</div>

<? }
add_action('thesis_hook_before_title', 'custom_banner_nav');

You can see that we have defined the function with the name ‘custom_banner_nav.” We have also defined a div space “custom_head_nav” so we can dial in on the guts of this function, the unordered list from before.

Now the entire function looks like this:

function custom_banner_nav() { ?>
<div id="custom_head_nav">

<ul>
	<li><a href="http://www.foleypod.com/" title="Link to the foleypod homepage" target="_blank">home</a></li>
	<li><a href="http://foleypod.com/portfolio" title="A link to our portfolio" target="_blank">our work</a></li>
	<li><a href="http://foleypod.com/payment" title="Easy way to pay foleypod" target="_blank">pay bill online</a></li>
	<li><a href="http://foleypod.com/testimonials" title="See who we've made very happy" target="_blank">what clients say</a></li>
</ul>

</div>

<? }
add_action('thesis_hook_before_title', 'custom_banner_nav');

We have the functionality now working. We upload our custom_functions.php file via FTP and we see this now:

Picture 37

Notice the list, ugly but functional. Now to get it in position and style it as we want it.

It’s custom.css time

First thing for me is to get rid of the bullets:

.custom div#custom_head_nav ul {
list-style-type: none;
}

Now that the bullets are gone lets get the upper left corner of this where we want it. For that we need to add margin to the left, and padding to the top (dont add margin to the top or you get an unwanted space with the graphics:

margin-left: 535px;
padding-top: 15px;

Then I add the text size. The resulting css tag looks like this:

.custom div#custom_head_nav ul {
list-style-type: none;
margin-left: 535px;
padding-top: 15px;
font-size: 12px;
}

Now I need vertical space between each line to get this dialed in. To do this I use this code:

.custom div#custom_head_nav ul li {
margin-bottom: 6px;
}

This adds margin to the bottom of each item in the list. The navigation now looks like this:

Picture 38

The last option

The last option I added was to put an underline to show when you hover your mouse. To do that I added the following CSS tags:

.custom div#custom_head_nav ul li a:hover {
text-decoration: underline;
}

That’s it. Simply FTP up your files and you are d.o.n.e.

Hope this helps. Let me know if you have any questions.

Reblog this post [with Zemanta]

Do you need help with your website?

If you are a web designer or web developer needing help, or a 'do-it-yourselfer' looking for a professional Internet presence I can help. If you need help with a specific WordPress issue or a complete website, I offer consultation, complete web design, and web development services. Get in touch and we can talk about your needs and start the process.

, ,

Do you need a WordPress consultant? Someone with experience?

I specialize in making WordPress work for people.

If you need help with a specific WordPress issue, I offer consultation, complete web design, and web development services.

Get in touch and we can talk about your needs and start the process.