0
votes

I am creating a dashboard that needs to adhere to corporate style requirements. I need to alter the background color of the header. I have successfully altered the color except for when I mouse over the header, it changes to a different color.

Here is an example of the header with the proper color scheme:

enter image description here

Here is the same dashboard with my mouse hovering over the header:

enter image description here

For added measure, here is the result of inspecting the element:

enter image description here

Any help that can point me in the right direction to keep the background of the header a white color would be greatly appreciated.

2

2 Answers

1
votes

There will be an css property most likely .logo : active or something - remove this.

Would need full code to give a definitive answer.

0
votes

I solved the problem by adjusting the CSS that appears in a supporting CSS file. In the OP, the inspect element tool points to a second CSS file that I had not altered. Specifically, the all-skins.min.css file.

Once I located that file, which for R/shinydashboard, the file appears in the AdminLTE directory of the package library/shinydashboard, I found the element that affected the behavior:

.skin-red .main-header .logo:hover{background-color: }

Since I wanted the background color to remain white, even on hover, I inserted #FFF into the background-color element and, now, the background color for the header remains white even on hover.