Search code examples
rshinyshinydashboardshinydashboardplus

Fix the position of the shiny dashboard header toggle button

In the shiny app below I want the toggle button that shows and hides the sidebar to remain fixed in its position whether the sidebar is hidden or not. Now when the sidebar is hidden there is a blue square empty gap between the button and the beginning of the page.

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
ui <- dashboardPage(
  
  dashboardHeader(
    titleWidth = 0
    
  ),
  dashboardSidebar(
  ),
  dashboardBody(
    tags$head(tags$style(HTML('
    /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                                background-image:url("https://www.r-project.org/logo/Rlogo.png");
                                background-position-x: 3%;
                                background-size: 170px 40px;
                                background-repeat: no-repeat;
                                background-color:#000;
                              }
        
       
                              '))),
    tags$style(type="text/css",".sidebar-toggle{ position: absolute;
    left: 0;
}")
    
  ),
  controlbar = dashboardControlbar(id = "dashboardControlbarID", collapsed = TRUE,skin = "light"

)
)

server <- function(input, output){
  
  
  
}

shinyApp(ui, server)

enter image description here

Solution

  • You just have to reduce the left margin - please see margin-left: 0px !important;:

    library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
ui <- dashboardPage(
  dashboardHeader(titleWidth = 0),
  dashboardSidebar(),
  dashboardBody(
    tags$head(tags$style(HTML('
    /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                                background-image:url("https://www.r-project.org/logo/Rlogo.png");
                                background-position-x: 3%;
                                background-size: 170px 40px;
                                background-repeat: no-repeat;
                                background-color:#000;
                                margin-left: 0px !important;
                              }
        
       
                              '))),
    tags$style(type="text/css",".sidebar-toggle{position: absolute; left: 0;}")
  ),
  controlbar = dashboardControlbar(id = "dashboardControlbarID", collapsed = TRUE,skin = "light")
)

server <- function(input, output){}

shinyApp(ui, server)