How to change text colour of navbarPage links when hovered on (in shiny app)?

Question

Here is the a redacted version of my shiny app:

ui <- tagList(
  fluidPage(
    titlePanel(""),
    tags$head(tags$style(HTML(
      "
        .navbar-default {
            color: red !important;'
        }
        
        "
      ))),
    navbarPage(
      windowTitle = "App Name",
      theme = bs_theme(bootswatch = "flatly",
                       base_font = font_google("Lato"),
                       primary = "#333F50",
                       bg = "white",
                       fg = "#D67540"),
      title = "I am the title",
      selected = "Main Tab 1",
      tabPanel(title = "Main Tab 1",
               fluidPage(
                 sidebarLayout(
                   sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
                   mainPanel(textOutput(outputId = "text_output"))
                 )
               )
               ),
      tabPanel(title = "Main Tab 2",
               fluidPage(
                   fluidRow(
                     column(7,
                            navlistPanel(
                              tabPanel("Tab 1"),
                              tabPanel("Tab 2"),
                              tabPanel("Tab 3"),
                              widths = c(2, 10),
                              well = FALSE)
                            )))
               )
      )
    )
  )

server <- function(input, output){
  output$text_output <- renderText(input$text_input)
}

shinyApp(ui, server)

This is what "Main Tab 1" looks like:

I would like to change the text colour of "Main Tab 1" and "Main Tab 2" from white to pink, and from teal green to red when the links are hovered/selected.

So far I've tried many variations of the following but without success:

.navbar-default {
   color: red !important;
}

Does anyone know how to fix this?

Any help is much appreciated :)

Answer 1

We can do it with the following CSS code block:

library(bslib)
library(shiny)

ui <- tagList(
  fluidPage(
    titlePanel(""),
    tags$head(tags$style(HTML(
      "
        .navbar-default {
            color: red !important;'
        }
        .navbar-default .navbar-nav > .active > a,
        .navbar-default .navbar-nav > li > a:hover {
            color: red !important;
        }
        .navbar-default .navbar-nav > li > a {
            color: pink !important;
        }
        "
    ))),
    navbarPage(
      windowTitle = "App Name",
      theme = bs_theme(bootswatch = "flatly",
                       base_font = font_google("Lato"),
                       primary = "#333F50",
                       bg = "white",
                       fg = "#D67540"),
      title = "I am the title",
      selected = "Main Tab 1",
      tabPanel(title = "Main Tab 1",
               fluidPage(
                 sidebarLayout(
                   sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
                   mainPanel(textOutput(outputId = "text_output"))
                 )
               )
      ),
      tabPanel(title = "Main Tab 2",
               fluidPage(
                 fluidRow(
                   column(7,
                          navlistPanel(
                            tabPanel("Tab 1"),
                            tabPanel("Tab 2"),
                            tabPanel("Tab 3"),
                            widths = c(2, 10),
                            well = FALSE)
                   )))
      )
    )
  )
)

server <- function(input, output){
  output$text_output <- renderText(input$text_input)
}

shinyApp(ui, server)