WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I recently updated the WP of a friend's site that I'm working on. Now his navigation bar is messed up and I'm new to WP so I'm not sure where to go to fix it.

Here's the site: http://www.millermusiclessons.com/

Here's what the nav should look like: http://www.millermusicllc.com/


share|improve this question
up vote 1 down vote accepted

It's not WordPress that messed it up, it's something with your theme.

On the working site, your navigation bar looks like this:

<ul class="sf-menu sf-js-enabled sf-shadow">
    <li class="page_item page-item-4 current_page_item"><a href="http://www.millermusicllc.com/" title="Home">Home</a></li>
    <li class="page_item page-item-7"><a href="http://www.millermusicllc.com/services/" title="Services">Services</a></li>
    <li class="page_item page-item-11"><a href="http://www.millermusicllc.com/portfolio/" title="Portfolio">Portfolio</a></li>
    <li class="page_item page-item-13"><a href="http://www.millermusicllc.com/about/" title="About">About</a></li>
    <li class="page_item page-item-126"><a href="http://www.millermusicllc.com/testimonials/" title="Testimonials">Testimonials</a></li>
    <li class="page_item page-item-15"><a href="http://www.millermusicllc.com/contact/" title="Contact">Contact</a></li>

On the broken site, the classes on your list are messed up. It's only rendering <ul class="sf-menu"> and this is what's causing the problem, because your stylesheet is applying layout, color, size, and other style information based on the missing classes.

So take a look at what you have creating the menu and what code you might have there manipulating the menu. Something isn't adding those classes to your menu as they should be.


Your stylesheet, around line 239, has the following declaration:

#top .topmenu ul.sf-menu.sf-js-enabled.sf-shadow li a{/*margin-left:3px;*/font-size:24px;font-weight:normal;text-decoration:none;margin: 0 0 0 -2px;padding: 0 10px;}

This CSS selector is looking for a <ul> element that has all three classes ("sf-menu, "sf-js-enabled", and "sf-shadow"). If you can't edit the menu directly, just change this line to:

#top .topmenu ul.sf-menu li a{/*margin-left:3px;*/font-size:24px;font-weight:normal;text-decoration:none;margin: 0 0 0 -2px;padding: 0 10px;}

I tested this through a debugging tool and it does display the menu correctly. But if you were specifically intending to restrict the styling based on the presence of those two CSS classes, then you'll need to dig a bit deeper.

share|improve this answer
Thanks for the help! That worked. – cmorris1441 Nov 18 '11 at 17:54

First a word of advice ... never use an image for separation. It is best to use the css border property.

EAMann is right it is not to do with wordpress in of itself but the styling of your theme.

You need to add this to your stylesheet:

#top .topmenu ul.sf-menu.sf-js-enabled.sf-shadow li a {
 font-size: 24px;
 font-weight: normal;
 text-decoration: none;
 margin: 0 0 0 -2px;
 padding: 0 10px;

And then apply this to the class of the containing opening ul tag:

sf-menu sf-js-enabled sf-shadow

It will look like this:

<ul class="sf-menu sf-js-enabled sf-shadow">

And as before instead of using an image as a separator for your li tags use the css border property. Saves on loading.

So instead of this:

.topmenu ul li {
 background: url("images/menu_sep.jpg") no-repeat scroll right 8px transparent;

Do this instead:

.topmenu ul li {
 border-right: thin solid #999;

This should fix the problem with your theme.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.