Oracle of ONE1

The header is the identifying masthead of your website. It is often convenient to include top level or special navigation here. In fact, I usually modify the header to include navigation to these pages:

1. Home
2. About
3. Contact
4. Site Map (activate the sitemap plugin and include
   <!-- ddsitemapgen --> in your page or post)
5. Store

Mostly these are pages and not posts but if you wished posts in the banner bar navigation it would be a simple matter by using a hidden category.

NOTE: Modifying the Header requires working with the template header.php and often the file style.css.

Modify header.php

The default header.php has the following code:

<div id="header">
  <div id="headerimg">
    <h1>
	<a href="<?php echo get_option('home'); ?>/">
	<?php bloginfo('name'); ?>
	</a>
	</h1>
	<div class="description">
	<?php bloginfo('description'); ?>
	</div>
  </div>
</div>

I usually use my own header images including text and so delete the headerimg div. With this in mind, I end up with the following code in place of the original:

<div id="header">
  <div id="menu_top_layout">
    <div class="menu_top">
	<ul class="menu_top">
	<li class="page_item page-item-0">
	  <a href="<?php bloginfo('url'); ?>"
	  title="<?php bloginfo('name'); ?>">Home</a>
	</li>
	<?php wp_list_pages('depth=1&child_of=0&title_li='); ?>
	</ul>
	</div>
  </div>
</div>

This alone does not give the desired effect, instead it outputs an unordered list of links. Now we must properly format this list using CSS.

Modify style.css

As you can see, I added a couple of style classes and ids to header.php. We can now use this to create new styles. Though you will likely need to adjust this CSS in oder to meet your styling needs, the following should get you started.

/* Header Menu - add to style.css */
#menu_top_layout 	{
	float: right;
	overflow: hidden;
	margin:1px;
	height: 20px;
	width: 420px;
	text-align: right;
} 

ul.menu_top {
	margin: 0;
	list-style: none;
	line-height: normal;
	float: right;
}

ul.menu_top li {
	display: inline;
	padding: 0;
}

ul.menu_top a {
	color: #FFA500;
	display: block;
	float: left;
	height: 26px;
	padding: 6px 8px 0 10px;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
}

ul.menu_top a:hover {
	color: #664700;
/*	background: transparent url(images/menuover.jpg) repeat-x; */
}

/* End Menu */

These simple header navigations often make a huge difference to visitors and I encourage you to consider including them on your site.