1

In this example,

library(shiny)
ui <- fluidPage(
  tags$style(type = 'text/css', HTML('.navbar {background-color: red;}')),
  navbarPage("",
    tabPanel("Tab 1", icon = icon("user")),
    tabPanel("Tab 2", icon = icon("cog")),
    tabPanel("Tab 3", icon = icon("sliders"))
  )
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

I would like Tab 3 to be special such that it appears different from the rest for:

  • background-color + font-color when not hovered and not selected
  • background-color + font-color when hovered
  • background-color + font-color when selected
  • Bolded font

For the other tabs, I am fine with sticking to the defaults.

None of the threads I came across directly address this issue for me, who has no HTML or CSS background. Some addressed part of the problem for tabsetPanel, but not for navbarPage.

Any advice, or redirection to a tutorial for dummies would be nice enough.

Thanks!

Matthew Hui
  • 634
  • 5
  • 18
  • You can also check this [answer](https://stackoverflow.com/questions/35025145/background-color-of-tabs-in-shiny-tabpanel) – A. Suliman Apr 23 '18 at 04:46

1 Answers1

3
library(shiny)
#select more than one Tab you can try
#1. a[data-value='Tab 2'], a[data-value='Tab 3'] {...}
#2. rename Tab 2 and Tab 3 values to Tab 02 and Tab 03 then use a[data-value*='0'] {...}
ui <- fluidPage(
       tags$style(type = 'text/css', 
                  HTML(".container-fluid > .nav > li > 
                        a[data-value='Tab 3'] {background-color: red; color:white}")),
    navbarPage("",
         tabPanel("Tab 1" ,value = "Tab 1" ,icon = icon("user")),
         tabPanel("Tab 2" ,value = "Tab 2" ,icon = icon("cog")),
         tabPanel("Tab 3" ,value = "Tab 3" ,icon = icon("sliders"))
   )
)
server <- function(input, output, session) {}
shinyApp(ui, server)
A. Suliman
  • 12,923
  • 5
  • 24
  • 37
  • A. Suliman, this was super helpful - thanks! Do you know if it would be possible to target two specific tabs at once (i.e. data-value = 'Tab 3' & 'Tab4'? I've been trying to figure it out, but so far have to separate the css code for the two into two different lines. – seabass20 Apr 10 '20 at 12:26
  • @seabass20 you're welcome, try one of the solutions proposed here [CSS - How to select multiple attribute values?](https://stackoverflow.com/questions/41137880/css-how-to-select-multiple-attribute-values) – A. Suliman Apr 10 '20 at 17:06
  • Here another useful link https://css-tricks.com/almanac/selectors/a/attribute/ – A. Suliman Apr 10 '20 at 17:17
  • 1
    Perfect, those definitely helped! Thanks again! – seabass20 Apr 11 '20 at 08:09