5

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)
Ronak Shah
  • 377,200
  • 20
  • 156
  • 213
Mark_1
  • 331
  • 1
  • 3
  • 16

1 Answers1

5

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)

enter image description here

Pork Chop
  • 28,528
  • 5
  • 63
  • 77
  • 2
    My saviour! Just as a note to make sure anyone coming across this doesn't make the same rookie mistake I just did: you need to include `tags$head(tags$style(HTML(navbar_js)))` _after_ any custom CSS stylesheets you may be loading, otherwise it will get overridden. – Mark_1 Feb 25 '21 at 11:45
  • 2
    @Mark_1 I saw you posted that question on the `rstudio` blog also, can you reference this answer also, please – Pork Chop Feb 25 '21 at 13:07
  • 1
    Great, thank you! I moved only the CSS part `@media (max-width: 1200px) {...}` into a CSS and generously increased `max-width` to gain a permanent burger menu style whatever the screen size :) – bathyscapher Apr 08 '22 at 08:30
  • I literally just copy-pasted this into my file exactly as it is here and it didn't work :(. I already have a tags$head() call in my app. Do I need to co-mingle them somehow to get this to work? – Bajcz Sep 06 '22 at 19:07