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....

Mobile nav render

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.

Code Classes

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.


  • this is css problem just follow @Ricky Odin Matthews answer or otherwise share your url
    – Magento 2
    Commented Nov 11, 2015 at 5:16
  • I am having the same issue in our site is jennyyoo.com. I tried the css fix above, and it didn't work. Commented Mar 23, 2016 at 17:29

2 Answers 2


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.

enter image description here

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.


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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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