Submenu text color on mobile

This topic contains 3 replies, has 2 voices, and was last updated by  Martin_1 3 weeks, 5 days ago.

Author Posts

Martin_1

Hi,

I can’t seem to get the text color of the dropdown to work on mobile. I have tried all sorts of things but it just eludes me. At the moment it is white on a white background. It should be black on a white background. But only for the dropdown on mobile.

This is the site that I am having trouble with is this one https://www.albruna-testplatform.com/finance4fashion/ and the English version https://www.albruna-testplatform.com/finance4fashion/en/

When you go to mobile view and look under Diensten (Dutch) or Services (English) you can see 4 menu items that are on the white background with white text.

If I look in the developer tools of FireFox I see the class awb-justify-title but targeting that doesn’t do anything.

I also see :

.fusion-body .fusion-menu-element-wrapper[data-count=”0″].collapse-enabled .fusion-megamenu-menu .fusion-megamenu-wrapper .fusion-megamenu-holder .fusion-megamenu .fusion-megamenu-submenu .fusion-megamenu-title a {
color: #ffffff!important;
}

But although when I change the color in the developer tool it does change it in the dropdown on mobile in the preview, it doesn’t work when I add it to the CSS file/Microthemer.


Sebastian

Hey Martin,

I think the issue here is that the selector is very long (and so has high CSS specificity) and it uses !important. So your selector in MT needs to have higher CSS specificity and use !important too.

You could just copy and paste it into Microthemer with a slight modification to give it higher specificity – prepend the body tag:

body.fusion-body .fusion-menu-element-wrapper[data-count=”0″].collapse-enabled .fusion-megamenu-menu .fusion-megamenu-wrapper .fusion-megamenu-holder .fusion-megamenu .fusion-megamenu-submenu .fusion-megamenu-title a {
   color: black !important;
}

That will give it one more specificity point, which means your MT CSS will override it even though the style rule above is included in the page after the body tag (which is after Microthemer’s CSS style rules, in the head).

I hope that helps. Please let me know if you are still stuck.

Thanks,
Sebastian


Martin_1

Hi Sebastian,

I am still stuck. I added this code but to no avail (see screenshot). I have no idea why it won’t “take”. Am I doing something really stupid and wrong?

Screenshot

Regards,

Martin


Martin_1

Heyyyy now it works.

I have no idea why it works all of a sudden though. Very weird. But it works and that’s the main thing :-). It was driving me nuts.

I never though of going with a higher specificity by using the body part on this one. I’ll try to remember that :-).

I keep learning but it’s slow work :-).

Thanks for the help and I wish you a merry Christmas!

Regards,

Martin

You must login or register to reply to this topic.