How to create horizontal menus in WordPress

You can create horizontal menus to showcase specific categories or pages for your site visitors. Horizontal menus are usually immediately below the site header, where most visitors easily see them. There are two steps to creating horizontal menus: adding the code to the template file and styling the menu with CSS.

Before you begin

This article explains how to add horizontal menus in WordPress. As with most customizations, the methods you use depend on which version of WordPress and which theme you’re using. The examples in this article are using WordPress version 4.8 running the Classic theme.

  • Some files can be edited directly in WordPress. Log in to WordPress via the HostPapa Dashboard. Go to Appearance > Editor. Look for the file in the list on the right side of the screen. Click the file name to open it in the editor.
  • If the file you need to edit isn’t available in the WordPress dashboard, you can download it using an FTP client and then edit it using your preferred text editor. When you’ve made the changes in the file, save and upload it.
  • You can also edit the file in the cPanel File Manager.

How to add the code to the template file

For best effect, use a short list of links in your horizontal menu. Too many items will clutter the page and make visitors less likely to click the links. In this example, we have links to four categories (Dog Grooming, How To, Recipes, Tech) and the WordPress documentation site. The list is wrapped in a <div> tag with the ID navmenu.

<div id="navmenu">
<ul>
        <?php wp_list_categories('depth=1'); ?>
	<li><a href="https://codex.wordpress.org">help</a></li>
</ul>
</div>

The first list item includes the wp_list_categories() template tag with the depth parameter with a value of 1. This returns a list of top-level categories. The second list item is a link to the WordPress documentation site. In this example, we’re adding the code to our theme’s header.php file immediately below the header <div>.

How to style the menu with CSS

In your theme style.css, add the following code as a reference to the navmenu div ID you created. This defines the div as an unordered list without any padding (indents) or images (bullets).

#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }

Add another line to specify that list items are displayed horizontally instead of vertically and add padding, so the links aren’t crowded together.

#navmenu li {display: inline; padding: 5px 20px 5px 20px}

Let’s also remove the default link underline.

#navmenu a {text-decoration:none; }

The result is this horizontal list of links immediately below the site header:

More information

If you need help with your HostPapa account, please open a support ticket from your dashboard.

Related Articles

Get online with our affordable web hosting

Get online with our affordable web hosting

Learn more now
HostPapa Mustache