What's the use of having a colorful and fanciful menu bar. The important thing is, it serves its key function.
Anyway, those overly-designed menu bars can only slow down the loading time.
Here is how to set up a simple clean two-horizontal line category menu bar for WordPress blog.
STEP ONE:
1. Log into your WordPress admin page.
2. Go to header.php and paste a set of code something like this just before </head>.
<ul class="nav">
<li><a href="http://yourURL/">Home</a></li>
<li><a href="http://yourURL/category/entertainment/">Entertainment</a></li>
<li><a href="http://yourURL/category/games/">Games</a></li>
<li><a href="http://yourURL/category/books/">Books</a></li>
<li><a href="http://yourURL/category/freebies/">Freebies</a></li>
</ul>
3. Click Update File button.
Note: The above code is just an example. You need to change the yourURL to your own homepage URL. So is the list of categories.Change them to your own categories.
STEP TWO:
1. Now go to style.css template.
2. Scroll down the code in the style.css template and paste the following code at the bottom of the template.
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
3. Click "Update File" button.
4. That's all. Now you should see the two-line horizontal category menu bar at the header of your blog.
Note: You may like to make some fine changes to the menu bar to your preference.
To make the two horizontal lines thicker: Change the number for border:1px. You can change it to 2px or 3px.
To make the font bolder and bigger, and background color, add these:
font-size: medium;font-weight: bold;
background-color: #CFF;
just below the code text-align:center;
It looks like this:
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-size: medium;
font-weight: bold;
background-color: #CFF;
}
Note: Th color code is just an example. You can change it into any color you want.
Hope you like this tutorial. Share this tip with others.
* Here is how to create a horizontal category menu bar for Blogger.