Submenu hidden under parent on mobile

Support
#1

I have an issue with the mobile navigation. The submenu does not display for some pages. See print and URL in secure notes.

#2

Hi There,

To fix this issue, please add this custom CSS under X > Theme Options > CSS:

.x-menu > li > .x-anchor[class*="active"] ~ ul.sub-menu {
    height: auto !important;
}

Hope it helps :slight_smile:

#3

It solved the issue. But !important; is never proper code. Then you end up overriding codes after codes. I’m surprised that support suggests it. I have used it before yes but mainly since I didn’t know what issues it could cause.

#4

Yes, you are correct. adding !important is generally a bad practice. I say generally because there are good uses for !important. We sometimes add !important here in the forum to make sure the code will work moreover that this is a temporary solution. The menu elements in Pro currently supports 2 levels of navigation only. 3rd level items might get hidden. If you want to remove the !important, add a class to your bar or container then append it to the selector like this .my-class .x-menu > li > .x-anchor[class*="active"] ~ ul.sub-menu.

Thanks.

#5

Yes, I was thinking about that. But we have a dedicated header per page which make the task quite heavy. This due to that we created this before you released the same builder for pages. So we will stick with the !important; for now and keep a note in the CSS file regarding this.Thanks

#6

You’re welcome.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.