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

timburkart
timburkart used Ask the Experts™
on
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!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solutions Only
Kyle HamiltonData Scientist
Most Valuable Expert 2014
Commented:
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;
}
timburkart

Author

Commented:
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,
Data Scientist
Most Valuable Expert 2014
Commented:
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

timburkart

Author

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

Regards,
timburkart
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
:-.)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial