How to set color of tabPanel title in navbarPage of a shiny app?

Question

I want to set the color of the titles of tabPanels in a navbarPage. I tried different approaches but couldn't figure out how to do it. Below is a reproducible example. I also tried other approaches but nothing worked.

library(shiny) 
ui <-shinyUI(bootstrapPage( 
  "", 

  navbarPage( 
    tags$style(HTML(" 
                  .tabbable > .nav > a  {font-weight: bold; color:black} 
                  .tabbable > .nav > li > a[data-value='t1'] {color:red} 
                  .tabbable > .nav > li > a[data-value='t2'] {color:blue} 
                  .tabbable > .nav > li > a[data-value='t3'] {color:green} 
                  .tabbable > .nav > li[class=active]    > a {color:aqua} 
                  ")), 
    tabPanel("t0",h2("normal tab")), 
    tabPanel("t1",h2("red tab")), 
    tabPanel("t2",h2("blue tab")), 
    tabPanel("t3",h2("green tab")), 
    tabPanel("t4",h2("normal tab")), 
    tabPanel("t5",h2("normal tab")) 
  ) 
  )) 
server <- function(input, output) {} 
shinyApp(ui=ui,server=server) 

Answer 1

It is not the .tabbable but the .navbar element.

To find the element naming open your Shiny app in any browser and inspect the element that you want to adapt. All element names and styles are presented in the inspection pane.

I added some more adaptable elements and weird colors in the example below.

library(shiny) 
ui <-shinyUI(bootstrapPage( 
  "", 

  navbarPage( 
    tags$style(HTML(" 
        .navbar-default .navbar-brand {color: cyan;}
        .navbar-default .navbar-brand:hover {color: blue;}
        .navbar { background-color: gray;}
        .navbar-default .navbar-nav > li > a {color:black;}
        .navbar-default .navbar-nav > .active > a,
        .navbar-default .navbar-nav > .active > a:focus,
        .navbar-default .navbar-nav > .active > a:hover {color: pink;background-color: purple;}
        .navbar-default .navbar-nav > li > a:hover {color: black;background-color:yellow;text-decoration:underline;}
        .navbar-default .navbar-nav > li > a[data-value='t1'] {color: red;background-color: pink;}
        .navbar-default .navbar-nav > li > a[data-value='t2'] {color: blue;background-color: lightblue;}
        .navbar-default .navbar-nav > li > a[data-value='t3'] {color: green;background-color: lightgreen;}
                  ")), 
    tabPanel("t0",h2("normal tab")), 
    tabPanel("t1",h2("red tab")), 
    tabPanel("t2",h2("blue tab")), 
    tabPanel("t3",h2("green tab")), 
    tabPanel("t4",h2("normal tab")), 
    tabPanel("t5",h2("normal tab")) 
  ) 
)) 
server <- function(input, output) {} 
shinyApp(ui=ui,server=server)