Background color of navlistpanel/tabpanel - css

Question

I actually want something similar as posted here
Change background color of tabPanel when it is active or hover over in Shiny
instead of navbarpage i want to use navlistpanel.
I have two annoying issues regarding the layout of my Dashboard. I added a picture to show what i mean. The default is this blueish colour, but i would like it to be red as a background and the color white as font. Now I kind of managed to do so, but still if you are standig/selecting the topic test1 then it's blue. How can i change or fix this?
Next thing, preferably I want to have test1 and then a submenu right below test 1 to do the filtering. Then i call that filters, and then i would like to add the two filters group variable and filter op datum.
Can anyone please help me out!
Now the filters are positioned are positioned outside the navlistpanel.
Kind regards,
Steffie
navlistPanel(well = FALSE,
tabPanel(new="", windowTitle="Test",
h4(id = "new","Test"),
tags$style("#new{color: white; background-color: #d52b1e;}"),
fluidRow(
# column(1), ## this put an extra space, dont like the look
column(2,
sidebarMenu(
uiOutput("groups")),
),
# fluidRow(
# column(2,offset = 1),
column(3,
sidebarMenu(
dateRangeInput('dateRange',
label = 'Filter op datum',
start = as.Date('2019-01-01') , end = as.Date('2019-12-31')
)
),
),

Answer 1

We can use css to change the colour of the navigation pills when selected. Place the css tags in the fluidpage using tags$head. To have options under a tab panel use navbarMenu and place the tabPanel calls with the navbarMenu call.
With regards to your questions in the comments, you originally set WELL=FALSE in your navlistPanel call. If you set it to TRUE, a box is placed around the navlistPanel bar. To change the background colour of this, we again make use of CSS, using the .well property. With this you can change font size, font, font color, background color, maximum width and height of the navlistPanel and so much more.
What does the syntax mean? Most of it is quite intuitive. I recommend changing some of the values like font-family to see what's actually going on. Also make use of the css tag right here on Stackoverflow. You can also learn more about css here.
library(shiny)
library(shinydashboard)
library(shinythemes)
ui <- fluidPage(
tags$head(tags$style(HTML(".nav.nav-pills.nav-stacked > .active > a, .nav.nav-pills.nav-stacked > .active > a:hover {
background-color: #d52b1e;
}
.well {
min-height: 20px;
max-width: 200px;
padding: 19px;
margin-bottom: 20px;
background-color: #2c3e50;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
font-family: 'Rock Salt', cursive;
}
"))),
navlistPanel(well = TRUE,
navbarMenu("Tests",
tabPanel("Test1",
fluidRow(
# column(1), ## this put an extra space, dont like the look
column(2,
sidebarMenu(
uiOutput("groups")),
),
# fluidRow(
# column(2,offset = 1),
column(3,
sidebarMenu(
dateRangeInput('dateRange',
label = 'Filter op datum',
start = as.Date('2019-01-01') , end = as.Date('2019-12-31')
)
),
)
)
),
tabPanel("Test 2",
"UI elements here")
),
tabPanel("Other",
"UI elements here")
)
)
server <- function(input, output){}
shinyApp(ui, server)