How can I create a horizontal menu in my WordPress theme?

Posted on 2012-07-15
Last Modified: 2012-07-15

Please go to and note the bottom menu with items Made in Michigan, FAQ, Photos and Community.

I would like to convert that menu to a horizontal menu but don't know CSS well enough to do so. I've tried a few things but without success.

Your help is appreciated!!

Thank you!
Question by:timburkart
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 500 total points
ID: 38188010
On line 84, in custom.css

remove float:left from

on line 87 in custom.css, remove display:inline, and add float:left;

.menu-sidebar li{
   margin-right:15px; /* adds a little spacing between items */

and the lines above the menu items are coming from menu.css line 159:
.menu-sidebar li.level1 {
   background: url(../images/menu_sidebar_level1.png) 0 0 repeat-x;

the first one being removed on line 162:

.menu-sidebar li.level1:first-child {
   background: none;

Author Comment

ID: 38188090
Sweet! Thank you!! It works.

May I also ask...? How can I add a border-left to the first item? I already added a border-right to each item. And, how can I center the entire bottom menu?

LVL 25

Accepted Solution

Kyle Hamilton earned 500 total points
ID: 38188110
to add the border:

menus.css line 162: targets the first li:
.menu-sidebar li.level1:first-child{
   border-left: 1px solid black;
   padding-left: 15px;

Open in new window

As it is, to center the menu you will need a width - this is a bit unfortunate, but that's how this menu was built...
   margin:0 auto;
   width: 450px; 

Open in new window


Author Closing Comment

ID: 38188140
Kudos to kozaiwaniec!! I sincerely appreciate his quick responses to my questions!

LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38188151

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question