How to change the hover color of the header options?

Plans supporting the use of custom CSS and JS in knowledge base site

You may want to customize the hover color for the header options at the top of the article to suit your preferences. Follow the below steps to customize your header options while hovering them.

Solution

1. Navigate to Settings () > Knowledge base site > Customize site > Custom CSS & JavaScript in the Knowledge base portal.

2. From the left navigation pane, click on the CSS tab and paste the following CSS snippet:

header .header_top .header_top_nav ul li a:hover {
color: red !important;
text-decoration: none;
}

a[role="menuitem"]:hover {
    color: red !important;
    text-decoration: none;
}

3. Update the hover color as per your requirement.

4. Click Save.

Outcome

Before

When you hover over the header menu options, there is no color change.

After

When you hover over the header menu options, the color changes to red. This will enhance the user experience.