Share on Pinterest

WordPress CSS: How to create an automatically evenly spaced menu

Print, email, or save this page as a PDF:
Share with your friends


Here is a method to create a WordPress menu using CSS to keep all of the navigation items spread out and even, no matter how many navigation items you have.

  1. Create your menu using WordPress’ built in menu system.
  2. Add an extra custom link at the end of the menu with # for the URL. Name it anything you want, but name it something meaningful so you’ll remember why it is there 3 months later. This must be in the last position of the menu.
  3. Use the following CSS code and pay attention to the commented areas of the CSS code and update to reflect the width and name of your specific menu:
    • Change “menu-mainmenu” to whatever you called your menu. You can look at the source code of your website to find this. Even easier if you use Firefox’s Firebug or Safari’s built in Code Inspector.
    • Change the width from 990px to whatever the width is of your menu.
    • “menu-item-1470” is the last “filler” menu item you added to your menu. Change the name of it to reflect the name of yours.

ul#menu-mainmenu { /* Change the name of menu to whatever you called yours */
width:990px; /* Change the width to match the width of your menu */
margin:0 auto;}

ul#menu-mainmenu li { /* Change the name of menu to whatever you called yours */
display:inline-block; float:none;}

#menu-item-1470 { /* Change the name of this nav button to yours */
display: inline-block;

#menu-item-1470 a, #menu-item-1470 a:hover{ /* Change the name of these nav buttons to yours */
display: none;

What people are saying...

Interested in working with Lena? Check out some of her client testimonials below!

Lena has always made time to take care of any size job needed in a very timely matter.

Troy Demel

Signs Above the Rest, Inc.

Troy  Demel

Lena Shore is one of the most creative graphic artists I know… and having been in the printing  industry for 45 years, I know a LOT of them. When I shifted into the real estate business, I had Lena  design my web site. She did a superb job, and she furnishes very timely updates and revisions to the site  whenever requested. I highly recommend you avail yourself of her talents and services.

Jon Anderson

Nilo Properties

Jon Anderson

Lena Shore has done a wonderful job for us – from brochures to business cards to the development of logos. She is prompt and professional and has a beautiful eye for art and the needs of the individual client.

Sarah Skinner, DVM

Mobile Veterinarian

Sarah Skinner, DVM