Issue in Chroma with Font Color of menu items which have submenus

[wolf]

While in “normal” (not-triggered) state of the Chroma menu on this site (done with Foundation 6) everything is just fine: Besonder Einsätze | ASB OV Trier (see 1st screenshot)

But when I scroll the page so that the triggered state gets activated (maybe you have to reduce the browser height for this), the main menu items which have submenus(!) cannot be seen anymore because they are now white (see 2nd screenshot).
Ok, I can change that color in the Chroma settings, but then the submenus are also colored in that same color, but I need these to stay white. Is there any css I could use to solve this issue…? Maybe @tav ?

[tav]

But are you not changing that to white in the settings, that looks to me like a deliberate change to the colour when the menu is scrolled? Am I missing something?

[wolf]

Thanks for your reply, Andrew. I‘m at the dentist now, but will try to answer nevertheless. ;-)
The problem is that the same color which I choose for the main menu is also used for the submenu. I need the main menu items to be black and the submenu items to be white…
In the screenshot you see that the color for the main menu isn’t applied…

[tav]

There are settings for both he main menu items and the dropdown items in all of the Chroma stacks, can you not just set the menu text to black and the dropdown text to be white using those settings?

[wolf]

@tav

can you not just set the menu text to black and the dropdown text to be white using those settings?

Of course I can set the colors, but as I wrote: as soon as one of the main menu items has submenus, the color setting is ignored for these main menu entries. In the screenshot you see that the main menu items which have a submenu(!) do use the text color of the dropdown menus:

[tav]

OK, sorry, I see now.

Its because F6 adds the dropdown class to the top of the menu structure whereas Foundation 5 only added it to the actual dropdown content.

The dropdown styling is therefore being applied to the top level menu item along with all the sub items.

You can do this using the User custom selector settings in Chroma but its quicker to just add the following to your site wide CSS

#stacks_in_817 > .chroma-scroll.is-fixed.is-scrolled > .su-content  ul.dropdown>.is-dropdown-submenu-parent>a:not(.custom){
    color:rgba(67, 79, 77, 1.00)!important;
}

[wolf]

Thanks so much, Andrew! This actually works just fine:
Besonder Einsätze | ASB OV Trier :-)
Can I use this code on each page or would I have to adjust the “stacks_in_xxx” number?

Another question: Any chance to let the active submenu-page have another color than the others? If you look at the non-triggered state you see the page “Besondere Einsätze” in yellow color. In the triggered state this color-style isn’t applied anymore. But if that should be too difficult we can leave it just the way it is…

[tav]

How about you put the Chroma into a CSSBox stack and give that a custom ID - then just replace the stacks ID with that ID - this way it will retain the selectivity that we need to override the theme.

If you use chroma-wrap as the id then the CSS would work on every page and could be in site wide styles and would be as follows:

#chroma-wrap  .chroma-scroll.is-fixed.is-scrolled > .su-content  ul.dropdown>.is-dropdown-submenu-parent>a:not(.custom){
    color:rgba(67, 79, 77, 1.00)!important;
}

[tav]

@wolf

Another question: Any chance to let the active submenu-page have another color than the others? If you look at the non-triggered state you see the page “Besondere Einsätze” in yellow color. In the triggered state this color-style isn’t applied anymore. But if that should be too difficult we can leave it just the way it is…

Yes - easy. The active item just gets a class of active so we add another condition to the above code, the second instruction is for your yellow active colour:

#chroma-wrap  .chroma-scroll.is-fixed.is-scrolled > .su-content  ul.dropdown>.is-dropdown-submenu-parent>a:not(.custom){
    color:rgba(67, 79, 77, 1.00)!important;
}

#chroma-wrap  .chroma-scroll.is-fixed.is-scrolled > .su-content  ul.dropdown>.is-dropdown-submenu-parent.active>a:not(.custom){
    color:rgba(255, 205, 18, 1.00)!important;
}

[wolf]

@tav

If you use chroma-wrap as the id then the CSS would work on every page and could be in site wide styles and would be as follows:

Thanks Andrew, perfect! :-)

[wolf]

@tav

The active item just gets a class of active so we add another condition to the above code, the second instruction is for your yellow active colour:

Thanks again Andrew. Although… this code seems to style the active parent (in the main menu – which is great this way anyway!), but not the submenu-item (in this case “Besondere Einsätze”). Do you also have a code for styling that…?
https://www.asb-trier.de/2021/unsere-angebote/besondere-einsaetze/
UPDATE: I said “… this code seems to style the active parent (in the main menu – which is great this way anyway!)”. Still true, but if I want to leave it this way also the active main menu items without(!) submenus would have to be styled this way. If you go on another page (for example “Mitmachen”) you see that in the triggered state this main menu text doesn’t turn yellow…

[tav]

@wolf

Thanks again Andrew. Although… this code seems to style the active parent (in the main menu – which is great this way anyway!), but not the submenu-item (in this case “Besondere Einsätze”). Do you also have a code for styling that…?

https://www.asb-trier.de/2021/unsere-angebote/besondere-einsaetze/

Just make it less specific so that it covers all items with the active class instead of just the top level one and write a case for non dropdowns.

#chroma-wrap  .chroma-scroll.is-fixed.is-scrolled > .su-content  ul.dropdown .active>a:not(.custom){
    color:rgba(255, 205, 18, 1.00)!important;
}

#chroma-wrap  .chroma-scroll.is-fixed.is-scrolled > .su-content  ul .active>a:not(.custom){
    color:rgba(255, 205, 18, 1.00)!important;
}

I’ll ask again - please please please put it in site-wide code. Its a nightmare to alter it in the browser when you have the styles inline in the HTML (from the page inspector).

[wolf]

@tav

please please please put it in site-wide code.

Sorry Andrew, did it right now and uploaded the whole site again. The active menu and submenu links are now working just as they should; thank you so much for that! But one thing is now left: If you take a look at the menu in triggered state you see that now the other menu which has submenus – but is not active (the last one “Der ASB Trier”) – is white again (instead of dark grey). Any chance to have that non-active main-menu-link appear in dark grey just like the other main-menu items?

[tav]

I’ll do it in the morning- bedtime now.

[wolf]

@tav

bedtime now.

For me too, Andrew. :-) Thanks so much for helping me out with this! Good night.

[tav]

@wolf

Any chance to have that non-active main-menu-link appear in dark grey just like the other main-menu items?

Yes, with the first piece of CSS that I posted above. I didn’t make it clear that the active styling that I posted more recently should be in addition to the original top level styling. I’ve combined the two active statements into one as they both use the same colour.

To be clear, the CSS in your site wide should be just the following (delete what you have and paste this into site-wide CSS):

#chroma-wrap .chroma-scroll.is-fixed.is-scrolled > .su-content  ul.dropdown>.is-dropdown-submenu-parent>a:not(.custom){
    color:rgba(67, 79, 77, 1.00)!important;}

#chroma-wrap .chroma-scroll.is-fixed.is-scrolled > .su-content ul.dropdown .active > a:not(.custom),#chroma-wrap .chroma-scroll.is-fixed.is-scrolled > .su-content ul .active > a:not(.custom) {
    color: rgba(255, 205, 18, 1.00) !important;
}

[wolf]

Mornin’ Andrew. Thanks for the updated code snippet! Already uploaded it and it works perfectly. :-)
Just sent you a donation for your help!

One last question: The “Logo size control” option within Chroma does not work with the “RW Menu” (where I build the navigation manually) of Foundation 6, right? Do you have any idea how I can then scale down the SVG logo in the upper left nevertheless when the triggered state of Chroma kicks in…?

[tav]

@wolf

Just sent you a donation for your help!

Thanks

@wolf

One last question: The “Logo size control” option within Chroma does not work with the “RW Menu” (where I build the navigation manually) of Foundation 6, right? Do you have any idea how I can then scale down the SVG logo in the upper left nevertheless when the triggered state of Chroma kicks in…?

The svg size is controlled by its width and so you should just be able to alter that using a custom setting in Chroma Pro.

[tav]

[wolf]

Aah, thanks Andrew! Currently I have built this navigation with Chroma. But I think the logo-resizing effect is worth to rebuild it with Chroma Pro. :-)