I added some custom CSS and subsequently the mobile menu colors changed - the current menu item becomes transparent. I don’t see any custom CSS that I think would be causing this, but when inspecting the page source in my browser, I see this:
Inherited from a
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu a:hover, .x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
color: rgba(254,93,65,0);
}
The last part (color: rgba(254,93,65,0) ) is what changes the active menu button to transparent, but I don’t know where that CSS comes from - what is “a”? The color is fine - we use RGB 254,93,65 - but we definitely didn’t add transparency, or even used the RGBA color space anywhere. So… what made this change?
I didn’t look any further since this is beyond my CSS skills, but the same thing happens on hover (only in mobile). The desktop menu colors are fine.
The only other clue as to where this may come from that I see is that this section (in my browser’s inspector) is marked “inline” vs. the next level of CSS (which has the original menu color) is “icon.css”.
Based on this, can you tell what it is that changes the mobile menu current and hover colors to transparent (and how did this get in there?). An most importantly, how do I remove this change?
Thank you!
