Search code examples
cssrshinybslib

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

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.

Solution

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