Go Premium for a chance to win a PS4. Enter to Win


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

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

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!
Question by:timburkart
  • 3
  • 2
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 2000 total points
ID: 38188010
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{
   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 2000 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

876 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