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

    styles for your menu:

    width: 928px;
      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

  • styles of the menu:
    display: inline-block;

    Note: you will want to erase any “position” or “float” declarations for the

  • 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

  • item in the menu has it’s own ID –