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

Big White Duck
21

It’s great to see these topics of conversation come up. Just shows that Chroma is still so far ahead of what is available.

1 Like
22

Hi Andrew. Sorry, but I have to ask you again for your help. I have exchanged the Chroma Stack with Chroma Pro and think that I have everything set there as before (the logo sizing works great by the way!). But some things regarding the colors now do not work anymore; maybe you would have to modify the codes you did send me? I just did send you a DM, including a download link to my project file. It would be really great if you could have a look at this… :)

23

If you are using a marker instead of the trigger settings then you will need to change the .is-scrolled classname in the code for the name of the marker (i.e. the name that defaults to style1) in the form [data-chroma-style="style1"]

So, without seeing it it would be something like this assuming that you have left the default style1 as the fixed style id

#chroma-wrap .chroma-scroll-pro.is-fixed[data-chroma-style="style1"] > .su-content  ul.dropdown>.is-dropdown-submenu-parent>a:not(.custom){
    color:rgba(67, 79, 77, 1.00)!important;}

#chroma-wrap .chroma-scroll-pro.is-fixed[data-chroma-style="style1"] > .su-content ul.dropdown .active > a:not(.custom),#chroma-wrap .chroma-scroll-pro.is-fixed[data-chroma-style="style1"] > .su-content ul .active > a:not(.custom) {
    color: rgba(255, 205, 18, 1.00) !important;
}

Its hard to guess like this so if this doesn’t work then please publish it on a page for me to look at and I’ll modify it.

24

Hi Andrew. Thanks, but that doesn’t work (I exchanged the “style1” with my marker name “fix_now”). Did you have a look at the project file I did send you the link for via PM? I have published the site now here:

25

No as I’m not at home and I no longer have a MacBook after the debacle of my previous two expensive pieces of junk (I’m on PC laptop now!) that’s why I just had to look at the site.

Looks like I didn’t remember the style attribute correctly - it is just data-style and not data-chroma-style - close though after 6 years!

#chroma-wrap .chroma-scroll-pro.is-fixed[data-style="fix_now"] > .su-content ul.dropdown > .is-dropdown-submenu-parent > a:not(.custom) {
    color: rgba(67, 79, 77, 1.00) !important;
}

#chroma-wrap .chroma-scroll-pro.is-fixed[data-style="fix_now"] > .su-content ul.dropdown .active > a:not(.custom), #chroma-wrap .chroma-scroll-pro.is-fixed[data-style="fix_now"] > .su-content ul .active > a:not(.custom) {
    color: rgba(255, 205, 18, 1.00) !important;
}

but it also looks like you need to adjust the settings in the Chroma fixed style for the other menu items (as you did in the original settings for the triggered styles). They are remaining white when it fixes.

26

Thanks Andrew, but it doesn’t work for me (uploaded everything just now). In normal state the current submenu is not yellow and also at the last main menu item “Der ASB Trier” all menu items are yellow.
And in triggered state all menu items from the last main menu item “Der ASB Trier” are also yellow. The main menu items without a submenu are white on white, ok. But when I switch them to black, the menu items from the submenu are also black.

In the “not-Pro” version of Chroma everything worked perfectly:

27

All those things are coming from the stack settings and not from the CSS that we’ve added. You need to replicate the original settings that you had before that were working. The CSS that Chroma and Chroma Pro generate should be the same if the settings are set correctly - they both use the same menu selectors.

I wish I’d just given you the 3 lines of CSS to do the SVG size manually now instead of replacing everything with Chroma Pro :)

28

It looks like the white menu items are in the settings for the fixed style (fix_now) - are you absolutely sure that you have the black colour set in the stack settings of this child stack just as you had in the triggered settings for the non-pro version?

29

if you want to use the original setup and scale your topbar logo with CSS rather than moving to the pro stacks then you can just add the following to the other CSS

#chroma-wrap svg{transition: width 200ms ease}
#chroma-wrap .chroma-scroll.is-fixed.is-scrolled svg{
  width:80%
}
30

Yes, I’m quite sure that I’ve set up everything correctly.

Ha…, I’ve just seen you’ve already done so! :-) Thanks so much for that code, which works perfectly. So I’m now using the normal Chroma-site (not Pro) with that code (already added it to all pages):
https://www.asb-trier.de/2021/

Sorry for nagging you so long with this stuff. In the end the result is great, thanks to your constant, patient and professional support, Andrew. Highly appreciated!

1 Like
31

Glad it’s all sorted.

1 Like