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)
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: