Search code examples
rshinyr-leaflet

Leaflet controls overlay navbarMenu in shiny

In a shiny navbarPage app the leaflet +- control overlays the navbarMenu content making it hard to read (the user might have to resize the browser window to be able to read the menu). Is this a bug? Is there a way to move the +- control into the background?

enter image description here

library(leaflet)
library(shiny)

ui <- navbarPage(NULL,
  navbarMenu("Menu",
    tabPanel("Menu Item 1", leafletOutput("map")),
    tabPanel("Menu Item 2"),
    tabPanel("Menu Item 3")
  )
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>% addTiles()
  })
}

shinyApp(ui, server)
Solution

  • There is a trick to move the +- control behind the dropdown menu by changing the z-index value of the +- control.

    library(leaflet)
library(shiny)

ui <- navbarPage(NULL,
  navbarMenu("Menu",
    tabPanel("Menu Item 1", leafletOutput("map")),
    tabPanel("Menu Item 2"),
    tabPanel("Menu Item 3")
  ),
  tags$head(tags$style(".leaflet-top {z-index:999!important;}"))
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>% addTiles()
  })
}

shinyApp(ui, server)