CODEWITHSUNDEEP
shinyshinydashboard
B.C
B.C

Reputation: 587

Adjust height of the whole header bar in dashboardHeader in shiny dashboard

I have seen that there is a similar question here :

Adjust height of dashboardheader in shinydashboard

but I don't have the reputation to comment on the given answer.

The solution given to this answer will work in the case where I want to expand the size of the header. However when I reduce the size to 20 pixels this only changes the height of the title section of the header, I would like to reduce the height of the whole header bar in the shiny dashboard. Is this possible ?

Here is an example using the solution to the question mentioned: 

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(
    # Set height of dashboardHeader
    tags$li(class = "dropdown",
            tags$style(".main-header {max-height: 20px}"),
            tags$style(".main-header .logo {height: 20px}")
    ) 
  ),
   dashboardSidebar(
    # Adjust the sidebar
    tags$style(".left-side, .main-sidebar {padding-top: 20px}")
  ),
  dashboardBody()
)

server <- function(input, output){}

shinyApp(ui, server)

Upvotes: 10

Views: 7184

Answers (1)

David White
David White

Reputation: 196

You need to override the min-height of the navbar and padding on the sidebar-toggle. I have updated your example below:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(
    # Set height of dashboardHeader
    tags$li(class = "dropdown",
            tags$style(".main-header {max-height: 20px}"),
            tags$style(".main-header .logo {height: 20px;}"),
            tags$style(".sidebar-toggle {height: 20px; padding-top: 1px !important;}"),
            tags$style(".navbar {min-height:20px !important}")
    ) 
  ),
   dashboardSidebar(
    # Adjust the sidebar
    tags$style(".left-side, .main-sidebar {padding-top: 20px}")
  ),
  dashboardBody()
)

server <- function(input, output){}

shinyApp(ui, server)

Upvotes: 18

Related Questions