Add a navigation menu to WordPress

This tutorial will explain how to add a simple Horizontal Navigation Menu to WordPress. The navigation menu or bar will allow your visitors to obtain easy access to your site and all of it's content directly from the top of each page or post.

Horizontal Nav Menu

NOTE: Navigation Menu features are currently built into most common WordPress themes. This information is left here for historical reference as it was written in 2006!

As you have probably noticed, this site contains a horizontal navigation menu located just under the header. This navigation menu was created by me and has since been used on many WordPress Blogs. The main advantage to having a horizontal navigation menu is that it provides easy access to main links either external or internal to sites, pages and categories. The menu I have created is fully editable and can link to any URL you set.

The following steps will explain how you can add a horizontal navigation menu like this to your site.

  • Log into your WordPress Admin panel.
  • From the admin panel, Click Presentation -> Theme Editor.
  • Select the "Stylesheet" theme file from the menu to the right (style.css)
  • Now scroll to the bottom of the style.css file and add the following:

div#navmenu {
margin: 18px;
text-align: center;
height: 20px;
width: 95%;
background-color: #C0D5F4;
}
div#navmenu ul {
margin: 0px;
padding: 0px;
text-align: center;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: small;
font-weight: bold;
color: #336699;
line-height: 20px;
white-space: nowrap;
}
div#navmenu li {
list-style-type: none;
display: inline;
}
div#navmenu li a {
text-decoration: none;
padding: 5px 5px;
color: #336699;
}div#navmenu li a:link {
color: #336699:
}div#navmenu li a:hover {
font-weight: bold;
color: #114477;
}

  • Click the update file button.
  • Now we need to select the "Header" theme file from the menu to the right (header.php)
  • Scroll to the bottom of your header.php and add the following:

<div id="navmenu">
<ul>
<li><a href="http://www.yourlink.com/">link</a></li>
<li><a href="http://www.yourlink.com/">link2</a></li>
<li><a href="http://www.yourlink.com/">link3</a></li>
</ul>
</div>

  • You will need to edit the "yourlink" addresses and "Link" Links to point to the addresses and links you wish to have listed. For example if you want a home page link it might look like the following example that I use on my site:

<li><a href="//lancelhoff.com/">Home</a></li>

  • If you would like to add more links to your nav menu simply add another link line. Once you have edited the addresses and links Click the update file button and view your site.

If you need to change the colors of the Nav Menu, you can do this from within the .css under the navmenu entries.

That concludes this "WordPress Horizontal Navigation Menu" tutorial.

Similar Simple Solutions