Ivan Teoh

I want my site to have a horizontal menu. So that my friend can easily browse to the page they want. Here are the steps for WordPress 2.6 that I do:

Step 1: Create horizontal menu showing page list

First I have to decide what page need to be in the horizontal menu. Currently, I just need “Home”, “Blog” and “About” pages. This navmenu division is right under header division in header.php (theme template file):

40
41
42
43
44
45
46

<div id="navmenu">
<ul>
	<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
	<li><a href="blog">Blog</a></li>
	<li><a href="about">About</a></li>
</ul>
</div>

Step 2: Add style on the horizontal menu

I need a style that match with the theme. I did it in the rush. After some study, the style.css (theme template file) will have additional code as below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* Begin NavMenu */
#navmenu
{
  font-size:14px;
  color:#73A0C5;
  font-weight:bold;
  padding:6px;
  overflow:auto;
  height:1%;
  clear:both;
}
 
#navmenu li
{
  display: inline;
}
 
#navmenu a
{
  color:#73A0C5;
  text-decoration:none;
  margin:0 10px;
  height:23px;
  line-height:23px;
  float:left;
  display:block;
}
/* End NavMenu */

Related Posts

• Where to Edit Theme Template File?

References

• Creating Horizontal Menus
• Digg-like navigation bar using CSS

Gallery

[Show as slideshow]