How to Add a Horizontal Navigation Menu in WordPress

How to Add a Horizontal Navigation Menu in WordPress: A horizontal navigation menu is one of the most common and essential elements of any website. It usually appears at the top of the site and contains links to your most important pages, such as Home, About, Blog, and Contact. A well-structured navigation menu helps visitors explore your content easily and improves the overall user experience. Fortunately, most modern WordPress themes support horizontal menus out of the box using the built-in menu system.

Add a Horizontal Navigation Menu in WordPress

✅ Recommended (Modern Method)

1. Go to Appearance → Menus in your WordPress dashboard.
2. Create a new menu and give it a name (e.g., "Main Menu").
3. Add your desired Pages, Posts, Categories or Custom Links to the menu.
4. Assign the menu to a display location like "Primary Menu" or "Header Menu" (varies by theme).
5. Click Save Menu.

Tip: If your theme doesn’t support menus, consider switching to a more modern theme or use the method below.

---

NOTE: The instructions below are for historical reference. Most modern themes no longer require manual code for menus.

🕰️ Legacy Method (2006 Manual Menu Code)

This site originally used a hand-coded horizontal menu under the header. Here's how you can still implement it manually if needed:

1. Log into your WordPress Admin panel.
2. Navigate to Appearance → Theme Editor.
3. From the sidebar, select style.css.
4. Scroll to the bottom and add the following CSS:

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;
}

5. Click the Update File button.
6. Now open header.php in the same editor.
7. Scroll to the desired spot under the header and add:

<div id="navmenu">
  <ul>
    <li><a href="https://www.yourlink.com/">Link1</a></li>
    <li><a href="https://www.yourlink.com/">Link2</a></li>
    <li><a href="https://www.yourlink.com/">Link3</a></li>
  </ul>
</div>

To add more links, simply duplicate one of the <li> lines and update the text and URL. For example:

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

You can change the color scheme and styles by editing the #navmenu CSS block in your style.css.

---

Final Thoughts on Adding a Horizontal Nav Menu to WordPress

If you’re using a modern WordPress theme, I highly recommend using the built-in Nav Menu system. But for nostalgic purposes or ultra minimal themes, the legacy method above should still work.