More share buttons
Share on Pinterest

WordPress CSS: How to create an automatically evenly spaced menu

Share on Pinterest
Share with your friends










Submit

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 */
text-align:justify;
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 */
width:100%;
display: inline-block;
height:0px;
}

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

Share on Pinterest
Share with your friends










Submit

Did you like this article? Have questions? Wanna boost your karma?

Join the discussion...

If you have any questions
about this article join the
discussion on Facebook:

Facebook! ►►

Tell Your Friends...

If you found this article
helpful, consider sharing
it, or hitting some of those
social media buttons
to give me a little boost!

Join My Mailing List!

I'd be delighted if you
joined my mailing list
for more helpful
tips and tricks.

What people are saying...

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

Lena is a highly-talented graphic designer and artist. The work she has done for me has been very creative  and yet professional. She understands my likes and dislikes when she designs marketing materials for me and  her understanding of technical issues, software programs, and cross-platform of operating systems is a real asset.  She’s also fun to work with, you can’t beat that combination!

Kim McDougal

Designer

Kim McDougal

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

The great thing for me about working with Lena, is that I can move fast, barely explain what I need and at the same time know in my heart that she will make it all okay. Over and over again she has created press-ready files that have turned into beautiful products that my clients rave about. Lena helps in keeping me somewhat sane in the crazy world of printing.

Christy King

Print Broker

Christy King