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

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)