No meu aplicativo Shiny, preciso alterar o bslibcomportamento padrão de recolher a barra de navegação em 992px, configurando-a para 1200px. Aqui está um exemplo:
library(shiny)
library(bslib)
# Reproducible example UI
app_ui <- function(request) {
shiny::tagList(
# I expected this CSS code to work but it doesn't :
tags$style(HTML("
/* Custom CSS to expand navbar at xl breakpoint rather than 992 default */
@media (min-width: 1200px) {
#nav.navbar-expand-xl .navbar-collapse {
display: flex !important;
flex-basis: auto !important;
-webkit-flex-basis: auto !important;
}
}
")),
bslib::page_navbar(
id = "nav",
fillable = TRUE,
theme = bs_theme(version = 5), # Using default Bootstrap theme for simplicity
bslib::nav_panel("I will collapse at 992px by default", "..."),
bslib::nav_spacer(),
bslib::nav_item(
)
)
)
}
server <- function(input, output, session) {}
shinyApp(app_ui, server)
Minha tentativa de consertar isso foi escrever código CSS (veja tags$style no topo do aplicativo), mas não surtiu efeito.
Como posso direcionar especificamente esse ID da barra de navegação ('nav') e fazê-lo fechar em 1200px ou menos, em vez do padrão de 992px ou menos? A única pista que encontrei está nesta publicação , mas ela sugere substituir os pontos de interrupção de todo o aplicativo, o que não é desejado no meu caso (aplicativo complexo já fazendo referência a pontos de interrupção existentes).