Service Portal navbar links visited bg color

[yundlu316]

Hi Experts,

I created a navbar in Service Portal and want to style it so that a visited link has a different background color and font color.   I found a Sassy CSS variable cheat sheet on github and found the following navbar variables, which all work great:

$navbar-default-link-color

$navbar-default-link-hover-color

$navbar-default-link-hover-bg

$navbar-default-link-active-color

$navbar-default-link-active-bg

In the above list, there is an active color and active bg variable, but is there one for visited links?   I tried to style my it like this, but it refuses to work:

nav li a:visited {

        background-color: #46474C;

        color: #fff;

}

Am I missing something or doing something wrong?   Thanks!

[MSVerma]

Faced the same issue.

Try using the code mentioned below. It is working in Madrid version.

a.md-default-theme:not(.md-button), a:not(.md-button):visited {
   color: $brand-primary;
}

[Barrilito van D]

Hi yundlu316.

It all depends a little where you add your css code.

To start, I would recommend to follow the path of the styles being use instead of looking on the internet 🙂  Your navbar is part of a portal and in that portal you have assigned a theme. In that theme there are some sassy css variables being loaded and there may be some css include files as well. That css is loaded and avaialble for sure, and that is where you can add your own css as well. Apart from that, in the widgets there is css as well which is loaded later then the theme css. So it differs if you add the css you wrote in the theme, includes or widgets. Your css looks correct, perhaps try  putting !important behind it, like this to give your new style some more preference:

nav li a:visited {

        background-color: #46474C !important;

        color: #fff !important;

}

 Otherwise try to look into detail what css is loaded and when and see how it is being set (by using some developers tools, or the F12 function in many browsers to look underwater in the page what is happening). Perhaps the style is being set more explicitely then you do it, the more explicit the element is being selected the more preference it gets.

Hope this helps!

---

If you think my answer put you in the right direction or you appreciated my effort, please mark the response as Helpful (👍). That way other people in the community will probably be triggered to read the responses too. If my answer solved your issue, please mark my response as Correct (✅). In the list of question people like me that want to help out will know your question was already answered and others that are curious to the answer know a good answer is given in the thread.
Thanks in advance! Good luck!