Service Portal: how to change header menu link hover background color?

[joost2633]

I'm trying to change the blue background hover color in the service portal header menu:

Here is the portal definition:

Anyone know how?

[Oleg]

I can't reproduce the problem. So I can only try to explain you how you can debug CSS rules applied on the header to find why hover colors not work.

You need just open Developer Tools, select a menu item (<a> element of the menu item), simulate "hover" effect and examine CSS rules applied:

By click on ":hov" button and checking ":hover" one can simulate "hover" effect. Examine of all CSS applied to the item (see yellow block) you should be able to find out why colors will be not changed. I suppose there there are exist some other CSS role with higher priority, which prevent :hover rule.

Selecting "Composed" tab can speed up the analyze:

[Oleg]

I just want to add that $navbar-inverse-link-hover-bg variable is just one from many standard SCSS variables of Bootstrap. All the standard variables are available and can be overwritten inside of CSS variable field of Service Portal Theme.

For example, one can see here, that the default value of $navbar-inverse-link-hover-bg variable is transparent. Thus one can use, for example,

$navbar-inverse-link-hover-bg: $nav-link-hover-bg !default;

to overwrite the SCSS variable. I used above another variable $nav-link-hover-bg, which is defined here as

$nav-link-hover-bg: $gray-lighter !default;

using $gray-lighter variable, defined here. As the result one will have $navbar-inverse-link-hover-bg: #eee in the above example.

I described the above example detailed only to address everybody to _variables.scss, which defines a lot of SCSS variables, which can be used and which can be overwritten. "Stock - High Contrast" Theme just an example of the usage of the variables.