CODEWITHSUNDEEP
rshinydashboard
firmo23
firmo23

Reputation: 8404

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)

Upvotes: 1

Views: 2352

Answers (1)

anDY
anDY

Reputation: 48

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;
}

Upvotes: 2

Related Questions