Use CSS to change hover over text color in shiny navbar-CodePudding

I have created a shiny dashboard using the 'flatly' shiny theme. However, the theme makes my navbar headings turn green when I hover over them. I would prefer them to turn orange instead. I have tried modifying this with custom html code but nothing changes.

The code I have attempted is:


ui <- navbarPage(theme = shinytheme('flatly'), collapsible = TRUE,
                 
                 
                 HTML('<a style="text-decoration:none;cursor:default;color:#FFFFFF;"  href="#">World Happiness Dashboard</a>'), id="nav",
                 
                 tags$head(tags$style('.navbar-nav .nav-item.active .nav-link,
                                      .navbar-nav .nav-item:hover .nav-link {
                                        color:orange;
                                      }')),
                 
                 windowTitle = "World Happiness Dashboard",

CodePudding user response：

the best approach to solve your issue will be to do an inspection with browser dev tools on the element you want to change. at dev tools you will be able to override css properties to your custom and see if it works. take note at the name of the element (name of the tag where the element is, provably a div), and use it on your css code to override it.

Here what you need: