Shiny: Background color of active tabPanel

Created on 14 Dec 2017  路  1Comment  路  Source: rstudio/shiny

Hi Everyone,

I am trying to customize the navbar of a shiny app but I cannot find the appropriate CSS that will enable me to change the background color of a tabPanel when it is active or when i hover-over it.
Below is the code I use

shiny

``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)

Thanks in advance.

Most helpful comment

Hi there,

In your CSS, try adding;

.navbar-nav li a:hover, .navbar-nav > .active > a {
color: #fff !important;

background-color:#2b8cc4 !important;
background-image: none !important;
}

Hopefully that works!

>All comments

Hi there,

In your CSS, try adding;

.navbar-nav li a:hover, .navbar-nav > .active > a {
color: #fff !important;

background-color:#2b8cc4 !important;
background-image: none !important;
}

Hopefully that works!

Was this page helpful?
0 / 5 - 0 ratings