I am building an app using Shiny in R with bslib using page_navbar() and I have a few extra CSS things I want to edit. I currently define these style tags in ui.R just after my theme definition like this:
page_navbar(
id = "main_tab",
# Theming
theme =
bs_theme(
bootswatch = "lux", version = 5,
primary = "#fc0",
secondary = "#545454",
"navbar-bg" = "#000",
"nav-link-color" = "#FC0 !important",
"nav-link-font-size" = "25px",
"nav-link-font-weight" = "normal",
"nav-text-color" = "#fc0 !important",
"nav-link-hover-color" = "#fc0 !important",
base_font = font_google("Bebas Neue"),
),
tags$style(".datatables td {padding-top: 1px; padding-bottom: 1px;}"),
tags$style(".nav-tabs .nav-link {color: #000000; font-size: 18px;}",
".nav-tabs .nav-link:hover {color: #ddaa00; font-size: 18px;}"),
tags$style(".card-body a {color: #000000}",
".card-body a:hover {color: #ddaa00}"),
...
)
This runs just fine and all the tags I have added here apply themselves to the page properly but my console returns a warning for each style tag added here:
Warning: Navigation containers expect a collection of
bslib::nav_panel()
/shiny::tabPanel()
s and/orbslib::nav_menu()
/shiny::navbarMenu()
s. Consider usingheader
orfooter
if you wish to place content above (or below) every panel's contents.
I would like it to run without warnings so I'm curious if there is a better place to put these tags to not get these warnings.
I found the answer to this issue. The way to do it is to put the tags outside the navbar_page and to put it under a head tag inside a tagList. I also have this within a function(request) for links. I am not sure if that makes a difference or not.
function(request){
tagList(
tags$head(
tags$style(".datatables td {padding-top: 1px; padding-bottom: 1px;}"),
tags$style(".nav-tabs .nav-link {color: #000000; font-size: 18px;}",
".nav-tabs .nav-link:hover {color: #ddaa00; font-size: 18px;}"),
tags$style(".card-body a {color: #000000}",
".card-body a:hover {color: #ddaa00}")
)
),
page_navbar(
id = "main_tab",
# Theming
theme =
bs_theme(
bootswatch = "lux", version = 5,
primary = "#fc0",
secondary = "#545454",
"navbar-bg" = "#000",
"nav-link-color" = "#FC0 !important",
"nav-link-font-size" = "25px",
"nav-link-font-weight" = "normal",
"nav-text-color" = "#fc0 !important",
"nav-link-hover-color" = "#fc0 !important",
base_font = font_google("Bebas Neue"),
)
...
)
}