Magento 1.9 RWD responsive menu problem (Not rendering correctly)

Question

Before I explain my problem I just want to confirm I still get this issue after I disable all plugins and disable all theme/skin modifications.

When the mobile menu displays (below 770px) the categories do not display correctly and render as if they have no children and do not dropdown when clicked but still have arrows as you can see below....

After inspecting the code can see that the incorrect classes are being applied to these parent categories as you can see in the screenshot below.

When I compare my nav code to demo sites such as Madison Island I can see some odd differences...

I can't seem to find where or why 'level-top' class is being applied or what significance it has anywhere. Another thing I noticed is the '< a>' tag only contains the class 'level-top' whereas the classes should be 'level0 has-children' which if I apply these the menu renders correctly (Even though clicking them still doesn't drop them down).

My topmenu/renderer.phtml file is not modified and I cannot see anything wrong with it.

LOST!

Answer 1

I tried to replicate what you have going on with your site, and i was able to get the same results by setting my category top navigation (found in the admin under system->config->catalog->catalog->category top navigation to 1 instead of the default 0.

The setting is there for you to control the depth of the of the menu system. So if you have categories that go 4 or 5 deep, the menu can become hard to navigate for the users. When set to 0, there is no filtering used, if you were to set it to 2, you would get your root category plus the next set of sub-categories.

Try changing that back to 0 and see if you get a different result.

Answer 2

It seems like a CSS issue, please check your code is as the following, to apply a 25px pad to the left side (adjust as needed);

.nav-primary a.level0 {
  padding: 0 15px 0 25px;
}