简体   繁体   中英

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)

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM