It’s Called Web Design

This is how you put text-based navigation in your header, or anywhere else for that matter.

This is going to be set up using a <div> labeled “nav”.  You can change it, but make sure you change it acrossed the board, otherwise it won’t work.

In your header, place the following code -

<div id="nav">
<ul>
<li><a href="http://yourdomain.com/page1">Page 1</a></li>
<li><a href="http://yourdomain.com/page2">Page 2</a></li>
<li><a href="http://yourdomain.com/page3">Page 3</a></li>
</ul>
</div>

Now these links are not dynamic, you will have to add or subtract the pages that you want listed.

If you want them dynamic, in WordPress simply use this -

<div id="nav">
<ul>
<li><?php wp_list_pages('title_li='); ?></li>
</ul>
</div>

My only issue with doing this, is that it will include all your WordPress pages, which you may not want.  You can still use this, but you will need to change the php code to -

  <?php wp_list_pages('exclude=17,38' ); ?>

with the exclude numbers representing the pages that you want excluded.  More examples of how to change how this list works can be found in the WordPress Codex HERE.

Now for the CSS.

Copy the following code into your CSS file -

#nav	{
	width: 475px;
	height: 37px;
	margin: 0 auto;
	padding: 0;
	font-size: 14px;
	position: relative;
	left: 190px;
	z-index: 99;
	color: #fff;
	line-height: 33px;
}

#nav ul {
	list-style:  none;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#nav li	{
	list-style:  none;
	float: left;
	padding: 0 4px;
	background: none;
}

#nav a {
	display: block;
	font: bold 0.9em Arial, san-serif;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	line-height: 37px;
	vertical-align: middle;
}

#nav a:hover {
	line-height: 37px;
	vertical-align: middle;
	color: #000;
	text-decoration: none !important;
}

This code is set up so that it will be a navigation bar that is 475px wide and 37px tall.  The text link will be white (#fff) and then change to black (#000) when hovered.  There is no underline, since text-decoration on the a:hover is set to none.  You can change this to underline or any other hover variable you prefer.  The text in this case is also all caps due to the “text-transform: uppercase;”.  You can remove that line if you want the text to appear as written.

To create more or less space between the words, simply increase or decrease the second number in the nav li padding.  Currently, each <li> has a 4px padding on both the left and the right sides.  Note, if you increase this padding much, or have more than a couple links, you will need to increase the width of the nav div.  Otherwise, the links will drop down onto a second line.

This entry was posted on Friday, September 19th, 2008 at 11:45 am and is filed under CSS, PHP, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.