0

I'm attempting to change the colour of the font when the mouse hovers over the options on the navbarPage menubar in an R Shiny app by using a CSS file with contents:

.navbar-default:hover {
    color: #F2E836;
    background-color: #000000 !important;
}

However, this isn't working for me. Any guesses as to why?

qanda
  • 225
  • 3
  • 12
  • 3
    can you please share your html markup? – Zuber May 12 '18 at 13:43
  • Hi. I'm quite new to all of this; what do you mean by your question? All I have is an R Shiny app using the navbarPage feature, and a separate CSS file with the contents above. I've been able to successful change the formatting of other parts of the menubar with the same CSS file, such as the background colour, so not sure why the above isn't working. – qanda May 12 '18 at 22:57

2 Answers2

3

Try this:

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #F2E836 !important;
    background-color: #000000 !important;
}

Omit !important if the style applies without it.

!important overrides other styles already defined on the same element. It is not a good practice to overuse !important as it makes obscure which line of CSS is applied to which element.

Hope this helps.

Jason Jisu Park
  • 421
  • 2
  • 6
0

See: Change color of bootstrap navbar on hover link?

(Apologies for repeating the question, but my question's title certainly more accurately reflects what I wanted to find out, hence why my searching didn't readily reveal the existing question!)

qanda
  • 225
  • 3
  • 12