Tag Archives: spaced

WordPress tricks: How to make navigation menu items automatically evenly spaced and centered

Here is the method I use to create an automatically evenly spacing navigation menu in a WordPress website. This way, no matter how many or how little pages your navigation menu contains, the menu items will be evenly spaced and centered.

First, create a new menu in WordPress by logging into the dashboard and clicking Menus under Appearance in the sidebar. Add all of the pages that you want in the navigation menu to your new menu.

Next, you will need to call this new menu in your header.php file instead of the default pages menu. See my post – WordPress tricks: Using a manually created menu for your main navigation menu  - for instructions on how to do this.

Next, you will need to edit the stylesheet codes that affect your navigation menu.

First, add these codes to the <ul> styles for your menu:

width: 928px;
  text-align:justify;
  margin:0 auto;

Obviously, you will want to change the width in the code to whatever the width of your menu is.

Next, add these codes to the <li> styles of the menu:

display: inline-block;

Note: you will want to erase any “position” or “float” declarations for the <li> items.

Now, you need to create a new menu item and add it to your menu. Go back to Appearance > Menus and add a menu item called “filler” or “test” or whatever you want. We are going to style this menu item so that it does not actually appear in the menu so it doesn’t matter what it’s called.

Important: make sure your “filler” menu item is positioned as the last item in the menu! Even later on, when you add new items to the menu, be sure that the “filler” menu item is always the last item on the menu.

Now, after you save the menu, visit your website. You will see the “filler” menu item at the end of the navigation menu. The next thing you need to do is to find it’s menu item ID number. To do this, either right-click the item and select “Inspect element” to use Firebug or view the source of the page. Each <li> item in the menu has it’s own ID – <li id=”menu-item-###”>. You need to figure out the ID number of the “filler” menu item.

Once you know the menu item ID, go back to your stylesheet. Add this block of code to your stylesheet:

#menu-item-519 {
 width:100%;
    display: inline-block;
    height:0px;
}
#menu-item-519 a {
 display:none;
}
#menu-item-519 a:hover {
 display:none;
}

Replace the numbers “519″ in the block of code above with the actual ID number of your ”filler” menu item.

This code prevents the “filler” item from actually displaying in your menu.

This method to create an evenly spacing navigation menu to your WordPress site worked well for me but let me know if you have any issues or trouble at all.

I based this menu trick off of the information I found in this article - http://dr2ab.wordpress.com/2011/03/24/even-horizontal-spacing-of-menu-items-with-css/.