Experts Exchange connects you with the people and services you need so you can get back to work.

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

Hello,

Please go to http://zclientdev.net/munchiesbymarcia 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!

timburkart

Asked: 2012-07-15

Advertise Here

2 Solutions

LVL 25

Kyle HamiltonData ScientistCommented: 2012-07-15

On line 84, in custom.css

remove float:left from ul.menu-sidebar

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

.menu-sidebar li{
float:left;
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;
}

timburkartAuthor Commented: 2012-07-15

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?

Regards,

LVL 25

Kyle HamiltonData ScientistCommented: 2012-07-15

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...

.menu-sidebar{
   margin:0 auto;
   width: 450px; 
}

Open in new window

timburkartAuthor Commented: 2012-07-15

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

Regards,
timburkart

LVL 25

Kyle HamiltonData ScientistCommented: 2012-07-15

:-.)

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

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

Join & Write a Comment Already a member? Login.

Featured Post