r - How to change the collapse breakpoints of a bslib navbar? - Stack Overflow

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)

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)

• r
• shiny
• navbar
• bslib

Share Improve this question Follow edited yesterday Jan 8,49966 gold badges1717 silver badges3131 bronze badges asked yesterday krebokrebo 2311 silver badge33 bronze badges New contributor krebo is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

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:

The theme bs_theme(5) uses a bootstrap.min.css which defines the breakpoints. These have to be overwritten in order to change the collapsing behaviour.

Secondly, you complained about the navbar overlapping your plot. I fixed that by adding some custom CSS to make the navbar positioned relative rather than fixed.

library(shiny)
library(bslib)

theme <- bs_theme()

# Overwrite grid breakpoints of 'bootstrap.min.css'
theme <- bs_add_variables(
  theme,
  "grid-breakpoints" = "(
    xs: 0,
    sm: 200px,
    md: 300px,
    lg: 500px, /* change the breakpoints of bootstrap.min.css here!. Make sure, that they are in ascending order */
    xl: 1800px
  )"
)

ui <- page_navbar(
  theme = theme,
  title = "Dashboard",
  underline = TRUE,
  inverse = TRUE,
  fillable = FALSE,
  position = "fixed-top",
  
  # Custom CSS to modify navbar overlapping behavior
  tags$head(
    tags$style(HTML("
      /* Make the navbar not overlap the plot :) */
      .fixed-top, .navbar-fixed-top {
          position: relative !important;
          top: 0;
          right: 0;
          left: 0;
          z-index: 1030;
      }
      
    "))
  ),
  
  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)

It will look like this: