Service Portal - Hover property

[Nuno Oliveira]

Hi there,

Anyone knows how to change the css hover property from the menu on the Portal header to a more dynamic way? 

Best regards

[Nuno Oliveira]

Yes, that I know, I think the issue is the widget where I am working on, I was trying on the stock widget, but I think that needs to be on the header menu widget. 

[RaghavSh]

Yes the header menu widget should work, as it shows the items defined in header menu.

[RaghavSh]

@Nuno Oliveira were you able to achieve this?

[Nuno Oliveira]

Not yet, I'm still working on that. 

[Nuno Oliveira · Accepted solution]

So, I just achieve this by cloning the Stock widget and added the follow:

CSS

:root {

  --hover-color: #1fff8f;

}

.nav > li > a:hover {

  color: var(--hover-color);

}

Server

var gr = new GlideRecord('table');

if (gr.get(id)) {

data.hover_color = gr.getDisplayValue("u_menu_hover_color");

}

Link function

    var r = document.querySelector(':root');

    r.style.setProperty('--hover-color', scope.data.hover_color);