Different Colors for HOVER AND ACTIVE Links

[chmm9002]

Hello,

I see how to set a link color, and then the “interaction” color. However, how can we have a DIFFERENT color for ACTIVE links? I see the “active” link is the same color as the “hover” in PRO.

[ruenel]

Hello Randall,

Thanks for writing in! Both the active menu item color and the hover menu item color is the same. Regretfully there isn’t an option that you can have a different color for the active color. You need to add CSS code into X > Theme Options > CSS to be able to change the active color.

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

By default, the active menu item is using the current-menu-item class, and then the default CSS code for the active and hover color is this:

.x-menu > li > .x-anchor[class*="active"] .x-anchor-text-primary {
    color: rgb(80,80,80);
}

Therefore, the final CSS code can be like this:

.x-menu > .current-menu-item  > .x-anchor[class*="active"] .x-anchor-text-primary {
    color: red !important;
}

Feel free to make adjustmenst to the above example code as you need . Be advised that this is just an example code. You will be the one to implement and maintain the code. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg