Shade (or color) 2nd level menu items for colapsed navigation

[charliesa]

So basically, for Colapsed Navigation, I want to color the 2nd level items to set them apart from the 3rd level items.

Alternativly, I could color the 3rd level item–either way, but I would like the 2nd and 3rd level items to be different.

[charliesa]

The Development site is http://dev.bustersvisionedu.org

[ruenel]

Hello There,

Thanks for writing in! The element inspector will only allow you to change the background colors of the sub menu. Having a different background color for the 3rd level will require css. Please use this code:

.hm14 .x-dropdown .x-dropdown,
.hm14 .x-dropdown .x-dropdown .x-anchor{
    background-color: red !important;
    border-color: red;
    box-shadow: none;
}

.hm14 .x-dropdown .x-dropdown .x-anchor.x-interactive,
.hm14 .x-dropdown .x-dropdown .x-anchor.x-interactive .x-anchor-content,
.hm14 .x-dropdown .x-dropdown .x-anchor.x-interactive .x-anchor-particle-primary,
.hm14 .x-dropdown .x-dropdown .x-anchor.x-interactive .x-anchor .x-anchor-particle-primary {
    background-color: green !important;
}

Hope this helps.

[charliesa]

This seems to work for “Inline Navigation” but not “Collapsed Navigation”

[christian]

Hey @charliesa,

3rd level submenu is currently not supported in Navigation Collapsed so you need to use up to 2 levels only.

Thanks.

[charliesa]

Thank You. I changed the particle colors to acheive something similar to what I wanted. Not perfect, but, but it willl do. I don’t really want to Flatten the menu since there are about 50 pages in the 3rd level, and it’s the what the customer wanted. I may make a totally separate menu for mobile later, but for now this will do.

Again, thanks.

[rad]

You’re most welcome!