rshinynavbarbslib

How to change the collapse breakpoints of a bslib navbar?


I'm working with page_navbar from the bslib package in a Shiny app in R. I want the navigation bar to collapse at a different breakpoint than it currently does (992px which is associated with .navbar-expand-lg). The navigation bar expands when there isn't enough space, and since my navbar is frozen with position = "fixed_top" per the docs, it overlaps the content.

I tried to edit the media query in devtools and add custom CSS as mentioned in this post and this post, but I haven't gotten anything to work. Ideally, I'd be able to either change the breakpoint for .navbar-expand-lg or replace it with the other ones that come with bs5. Here's a basic app to demonstrate the problem:

library(shiny)
library(bslib)

ui <- page_navbar(
  theme = bs_theme(version = 5),
  title = "Dashboard",
  underline = TRUE,
  inverse = TRUE,
  fillable = FALSE,
  position = "fixed-top",
  tags$style(type = "text/css", "body {padding-top: 50px;}"),
  nav_panel(
    title = "Extremely Long First Page Title",
    layout_columns(
      card(
        card_header("Histogram"),
        plotOutput(outputId = "distPlot"),
        height = "1000px"
      )
    )
  ),
  nav_panel(title = "Even Longer Extremely Long Second Page Title"),
  nav_panel(title = "Even Longer, Even Longer Extremely Long Third Page Title"),
  nav_spacer(),
  nav_menu(
    title = "Links",
    align = "right"
  ),
  nav_menu(
    title = "Help",
    align = "right"
  )
)

server <- function(input, output, session) {
  output$distPlot <- renderPlot({
    hist(rnorm(1000, 50, 5))
  })
}

shinyApp(ui, server)

Solution

  • Use bs_add_variables() for overwriting the Bootstrap Sass variable $grid-breakpoints with .where = "declarations" such that it is defined after Bootstrap (see Theming variables within the bslib docs):

    theme = bs_theme() |>
      bs_add_variables(
        "grid-breakpoints" = # here e.g. with lg: 800px;
          "(xs: 0, sm: 576px, md: 768px, lg: 800px, xl: 1200px, xxl: 1400px)",
        .where = "declarations"
      )
    

    Result:

    enter image description here