Search code examples
rshinydashboard

Adjust the width of the header bar in dashboardHeader in shiny dashboard


Below I have adjusted the height of the whole header bar but I would like to know how to adjust the width as well in order to match the sidebar width which I increased. The toggle button should be where the sidebar ends.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "saddasda",
    # Set height of dashboardHeader
    tags$li(class = "dropdown",
            tags$style(".main-header {max-height: 50px}"),
            tags$style(".main-header .logo {height: 50px;}"),
            tags$style(".sidebar-toggle {height: 50px; padding-top: 1px !important;}"),
            tags$style(".navbar {min-height:50px !important}"),

    ) 
  ),
  dashboardSidebar(width = 400,
    # Adjust the sidebar
    tags$style(".left-side, .main-sidebar {padding-top: 20px}")
  ),
  dashboardBody()
)

server <- function(input, output){}

shinyApp(ui, server)

Solution

  • Two elements need change.

    1. width of "logo" to width of sidebar (400px)
    2. margin-left of "navbar" (where the toggle button starts)

    Here is CSS code to be inserted to tags$style:

    .main-header .navbar {
        margin-left: 400px;
    }
    
    .main-header .logo {
        width: 400px;
    }