r - Change background color of tabPanel when it is active or hover over in Shiny

Question

I have created an R Shiny app and I would like to change the background color of tabPanel when it is active or when I hover over. I am not sure that I use define the correct properties in the css file.

enter image description here

Below you can find the code that i use:

library(shiny)
library(shinydashboard)

ui <- function(){
                navbarPage(title = 'Hello', 
                           tabPanel("title2"),
                           tabPanel("title3"),

                tags$style(type = 'text/css', 
                          '.navbar { background-color: red;}',
                          '.navbar-default .navbar-brand{color: white;}',
                          '.tab-panel{ background-color: red; color: white}',
                          '.nav navbar-nav li.active:hover a, .nav navbar-nav li.active a {
                            background-color: green ;
                            border-color: green;
                            }'

                ))

}

server <- function(input, output, session){
}


shinyApp(ui = ui, server = server)

I would greatly appreciate your help on this.

Answer 1

Hi you need to tell shiny that the CSS string is HTML with the HTML() function like my example below. Even better but not necessary is to put it in a head tag. I also think you had someproblem in your css code. Be careful to always lead all classes with .

library(shiny)
library(shinydashboard)

ui <- function(){
  navbarPage(title = 'Hello', 
             tabPanel("title2"),
             tabPanel("title3"),
             tags$head(
               tags$style(type = 'text/css', 
                          HTML('.navbar { background-color: red;}
                          .navbar-default .navbar-brand{color: white;}
                          .tab-panel{ background-color: red; color: white}
                          .navbar-default .navbar-nav > .active > a, 
                           .navbar-default .navbar-nav > .active > a:focus, 
                           .navbar-default .navbar-nav > .active > a:hover {
                                color: #555;
                                background-color: green;
                            }')
                          )
              )
            )

}

server <- function(input, output, session){
}


shinyApp(ui = ui, server = server)

Hope this helps!