How to change breakpoint of navbarPage collapse in Shiny

Question

I'd like to use shiny::navbarPage(collapsible = TRUE) to collapse navigation elements into a menu when my Shiny app is viewed on small screens. By default, the collapse is triggered when the width of the browser is less than 940 pixels. Is there any way to change this so that the collapse triggers with slightly larger browser widths, e.g., 1200 pixels?

I've had a look at this Bootstrap 3 Navbar Collapse and this Change bootstrap navbar collapse breakpoint without using LESS but couldn't figure out how to get it to work with Shiny.

Toy Shiny app:

library(shiny)

ui <- navbarPage("This app has a long title to take up space for the purposes of this example", collapsible = TRUE,
                 
                 tabPanel("Panel that also has a long title 1"),
                 tabPanel("Panel that also has a long title 2"),
                 tabPanel("Panel that also has a long title 3")
                 
                 )

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

user_2753526 · Answer

Mark! you may need to override the defaults, particularly the @media, in the example below it will collapse if the screen is below 1200px. Have a look at the pixel size of 1200 printed with the Dev tools, feel free to change that value as per your needs...

library(shiny)

navbar_js <- "@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}"

ui <- navbarPage("This app has a long title to take up space for the purposes of this example", collapsible = TRUE,
                 tabPanel("Panel that also has a long title 1"),
                 tabPanel("Panel that also has a long title 2"),
                 tabPanel("Panel that also has a long title 3"),
                 tags$head(
                     tags$style(HTML(navbar_js))
                 )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

How to change breakpoint of navbarPage collapse in Shiny

1 Answers