Navigation Collapsed - third level menu expansion

Support
#1

I have 3 levels of menus using a Navigation Collapsed element.
Top menu >> Submenu >> Third menu
When I click on a top menu dropdown, the rest of the top menu links move down to reveal the submenu links.
When I click on the submenu dropdown, the rest of the submenu links move down to reveal the third menu. However, sometimes this can cut off the third menu item if there are too many in the third menu.

Is there any way to make the entire menu shift down (and back up) when someone selects the third menu?
Also, is there any way to change the coloring of the third level menu to help differentiate it from the second level submenu?

The site is SpotterRFtest.com

Thanks in advance!

#2

Hello There,

Thanks for writing in! Could you please update your Pro theme to the latest version? Pro 1.2.3 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/).

After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#3

Hi,

Nothing in the new update solves the problem.

The submenus can still get lost behind the main menu when in mobile (using the Navigation Collapsed element).

Also, I’m trying to change the color of the third level menus. How do I do that? Is there a CSS class for third level menus?

Thanks,
Phil

#4

Hello Phil,

We’re sorry for the inconvenience this has cause you. This is a known bug that has been forwarded to our developer already. For the mean time, please try adding this custom CSS as temporary fixed:

[data-x-collapse="opening"]>ul.sub-menu {
    overflow: auto !important;
    height: auto !important;
}

For the color of third level submenu, try this:

.sub-menu .sub-menu .x-anchor {
    background-color: red;
}
.sub-menu .sub-menu .x-anchor span.x-anchor-text-primary {
    color: green;
}

On the builder, option for second level and third level menu is the same, that’s why we use that custom CSS.

Hope this helps.

1 Like
#5

Thanks Lely! That helps a ton!

I ended up using this code for my site:

.sub-menu .sub-menu .x-anchor span {
    background-color: grey;
}

.sub-menu .sub-menu .x-anchor span.x-anchor-text-primary {
	color: white;
	font-weight: 300;
}

Now I just want to change the submenu hover and selected color. For example, if I hover over or select a main menu item and it drops down to submenu items, the selected main menu item changes color. I want to do that with the submenu (2nd level menu). How do I do that? Adding the CSS seems to have overridden the header builder options.

Also, is there documentation on what all of the classes are? A huge list of all of the classes for different items on the site?

Thanks again!

#6

Hi There,

On The Header Builder you need to change the interaction background color of the submenu.

Hope it helps

#7

Thanks for the fix :wink:

#8

You’re most welcome!

#9

Team - has the below been resolved?? I’m on the latest Pro and am facing this issue at present.

Thanks
Sam

#10

Hi Sam,

That is a known issue, for a temporary fixed you can add the code below in Header > CSS

[data-x-collapse="opening"]>ul.sub-menu {
    overflow: auto !important;
    height: auto !important;
}

Thanks

#11

I just had to implement this CSS to resolve a collapsed navigation element with 3-4 tiers of sub-menu items

#12

Hi Alex,

Not sure what problem you are having, and if the above code will help you with this. If you still get the problem after integrating the code, please create a new thread and explain the problem with the website URL for further assistance.

Thanks