How to - WordPress Horizontal Navigation Menu

Updated By - January 10, 2009

How To Make a WordPress Horizontal Navigation Menu: Creating a clear and well structured navigation menu is essential for any WordPress site. While older plugins like CustomNav were once popular for building horizontal menus, WordPress now provides a built-in, theme-friendly approach that allows you to create, customize, and style horizontal navigation menus directly through the admin panel and the Customizer. This method is faster, more secure, and fully compatible with modern themes.

Note on CustomNav Plugin: The CustomNav plugin, which was once popular for creating horizontal navigation menus, is no longer maintained or available for download. Using outdated plugins can pose security risks and compatibility issues with modern WordPress versions. Fortunately, WordPress now includes a native, theme friendly menu system that allows you to create horizontal menus safely and efficiently without relying on third party plugins. This guide walks you through the current best practices using now built in features and optional custom CSS for styling.

Creating a WordPress Horizontal Navigation Menu

Creating a clear and well structured WordPress navigation menu is essential for any site. While older plugins like CustomNav were once popular for building horizontal menus, WordPress now provides a built in, theme friendly approach that allows you to create, customize, and style horizontal navigation menus directly through the admin panel and the Customizer. This method is faster, more secure, and fully compatible with modern themes, while also allowing for optional custom styling to match your site’s look and feel.

Step 1: Create a Menu

  1. Login to your WordPress admin panel.
  2. Navigate to Appearance > Menus.
  3. Click Create New Menu and give it a name (e.g., "Main Menu").
  4. Add pages, posts, categories, or custom links from the left-hand panels to your menu structure.

Step 2: Assign Menu Location

  1. Under Menu Settings, assign your menu to a Theme Location. Most modern themes have a "Primary" or "Header" menu location for horizontal navigation.
  2. Click Save Menu.

Step 3: Customize Menu Appearance

You can style your menu through the WordPress Customizer:

  1. Navigate to Appearance > Customize > Menus.
  2. Select your menu and click Manage Locations or Menu Settings.
  3. Use the Customizer options to adjust colors, spacing, typography, hover effects, and more.

Step 4: Optional Advanced Attributes

For advanced users, WordPress allows you to add attributes like title, CSS class, or link target to each menu item:

  1. Go to Appearance > Menus and expand any menu item.
  2. Click Screen Options at the top right and ensure CSS Classes, Title Attribute, and Link Target are checked.
  3. Fill in your desired values and click Save Menu.

Step 5: Preview Your Horizontal Menu

Once saved, your menu will appear horizontally in the header of your theme if assigned to the Primary/Header location. You can always return to the Customizer to tweak the design or update links.

Optional: Add Custom CSS for Horizontal Menus

If your theme does not automatically display the menu horizontally or you want more control over styling, you can add custom CSS via Appearance > Customize > Additional CSS:


/* Example horizontal menu styling */
.main-navigation ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-navigation li a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
}

.main-navigation li a:hover {
  color: #0073aa;
}

This CSS ensures the menu items display in a row, adds spacing, and simple hover effects. Adjust colors, fonts, and spacing as needed to match your theme.

WordPress Horizontal Navigation Menu

With this approach, your wordpress horizontal navigation menu is modern, secure, and theme independent, while still allowing advanced styling when needed.

Similar WordPress Plugins