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 ?
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…
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:
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…
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…?
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…
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?
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):
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…?