• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1004
  • Last Modified:

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!
0
timburkart
Asked:
timburkart
  • 3
  • 2
2 Solutions
 
Kyle HamiltonData ScientistCommented:
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;
}
0
 
timburkartAuthor 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,
0
 
Kyle HamiltonData ScientistCommented:
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

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

Regards,
timburkart
0
 
Kyle HamiltonData ScientistCommented:
:-.)
0
Question has a verified solution.

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

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now