Proper place for page style tags in a Shiny App using bslib and page_navbar?

Question

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/or bslib::nav_menu()/shiny::navbarMenu()s. Consider using header or footer 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.

Answer 1

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"),
    )
  ...
  )
}

Answer 2

From my understanding the proper way would be to add your rules using bs_add_rules. To check and show that this works I have set the color for links in card bodies to red:

library(shiny)
library(bslib)

ui <- page_navbar(
  id = "main_tab",
  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"),
    ) |>
      bs_add_rules(
        list(
          ".datatables td {padding-top: 1px; padding-bottom: 1px;}",
          ".nav-tabs .nav-link {color: #000000; font-size: 18px;}",
          ".nav-tabs .nav-link:hover {color:  #ddaa00; font-size: 18px;}",
          ".card-body a {color: red}",
          ".card-body a:hover {color: #ddaa00}"
        )
      ),
  nav_panel(
    title = "One",
    card(
      card_body(
        a("Posit", href = "https://posit.co"),
      )
    )
  )
)

server <- function(...) { }

shinyApp(ui, server)
#> 
#> Listening on http://127.0.0.1:6716