Align header elements in shiny dashboard

Question

I'm working with shinydashboard to jazz up a shiny app a bit and I'm having trouble positioning some elements (eg logo) on the page. I found this answer which was immensely useful in increasing the height of the header, but I can't quite manage the alignment issue.

There are still spaces on the left and right (red ovals) between the logo and the floating hamburger and the edges. The only way I've been able to move the hamburger has been increasing the relative size (titleWidth = "92%") of the header to accommodate the longer title, but if the window is resized, the menu collapse toggle ends up in weird places. And the text in the middle I'd like to centre vertically.

One neat thing about shinydashboard is that if the window is made narrower, the body content rearranges so those value boxes stack. The side effect, however, if the header height is changed to accommodate the logo is:

the header overlaps some of the content. I'm new to css but some digging through the AdminLTE.css and the _all-skins.css that are used by shinydashboard got me something a bit closer:

library(shiny)
library(shinydashboard)

server <- function(input, output, session) {}

ui <- dashboardPage(
  title = "ShinyApp",
  header = dashboardHeader(
    tags$li(
      class = "dropdown",
      tags$style(
        ".main-header {max-height: 100px; 
                      font-size:24px; 
                      font-weight:bold; 
                      line-height:24px;}"),
      tags$style(
        ".main-header .logo {height: 100px;
                             font-size:24px; 
                             font-weight:bold; 
                             line-height:24px;align:}"
      )
    ),
    title = HTML(
      "<div style = 'background-color:#3333cc; vertical-align:middle'>
       <img src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg' align = 'left' height = '100px'>
        Long, longer, longer-still Shiny App title
       </div>"),
    titleWidth = "92%"
  ),
  sidebar = dashboardSidebar(
    width = "300px",
    sidebarMenu(
      tags$style(
        ".main-sidebar {float:top; margin-top:40px; padding-left:15px; padding-right:15px}"
      ),
      h2("Sidebar heading"),
      sliderInput(inputId = "slider1",
                  label = "Some slider",
                  min = 5, 
                  max = 500,
                  value = 100, 
                  step = 5),
      numericInput(inputId = "num1",
                   label = HTML("Value in <em>units</em>"),
                   min = 1000, 
                   step = 250, 
                   value = 500)
    )
  ),
  body = dashboardBody(
    tags$head(
      tags$style(
        HTML(
          ".skin-blue .main-header .navbar {background-color: #3333cc}
           .skin-blue .main-header .navbar .sidebar-toggle:hover {background-color: red}
           .skin-blue .main-header .logo {background-color: #3333cc;border-bottom: 0 solid transparent;}
           .skin-blue .main-header .logo:hover {background-color: #3333cc;}
           .content-wrapper {float:top; margin-top:40px}"
        )
      )
    ),
    fluidRow(
      valueBox(width = 6,
               value = "20%",
               icon = icon("thumbs-up"),
               subtitle = "some value",
               color = "orange"),
      valueBox(width = 6,
               value = "30,000 units",
               icon = icon("truck"),
               subtitle = "some other value",
               color = "orange")
    )
  )
)
shinyApp(ui = ui, server = server)

yielding

from another answer, I got something like padding to shift the sidebar down and took a guess at making a similar modification to the .content-wrapper

.main-sidebar {float:top; margin-top:40px; padding-left:15px; padding-right:15px}

and

.content-wrapper {float:top; margin-top:40px}

collapsed mode is okay, but there are now two vertical scroll bars and widening the window again, there's now a black separator between the top of the body and the header. The 40px I used for the margin-top was purely trial and error.

To summarise:

• I'd like to align header logo left (maybe also sidebar toggle right, but can live with where it is)
• Vertically-align the header text
• Accommodate a longer title (eg titleWidth = 95%)
• Not overlap body content with header when viewed in a narrower window.

Aside from the above, regarding the header text, I have tried setting style = "vertical-align:middle" in various places around the text and logo image definitions as suggested in this post (one example is still in the sample code), but the text remains stubbornly at the top. Presumably there is a css element I haven't found that controls it.

Any help would be greatly appreciated. Note sample code modified to use random stock internet photo rather than android logo to facilitate reproducibility of example.

Answer 1

please note that I am not a CSS expert so not every solution might be ideal.

Remove unnecessary vertical scroll bars

.wrapper {overflow-y: hidden;}

I'd like to align header logo left (maybe also sidebar toggle right, but can live with where it is)

Override padding to 0px:

.main-header .logo {
  padding: 0px 0px;
}

Float sidebar-toggle to the right:

.sidebar-toggle {
  float: right !important;
}

Vertically-align the header text

vertical-align has no effect, but you can use line-height to set the title where you want.

.main-header .logo {
  line-height: 85px !important;
  padding: 0 0px;
}

Accommodate a longer title (eg titleWidth = 95%)

Increase the max-height of the main-header. Alternatively you could decrease the amount of text so that it fits small-middle screens better.

.main-header {
  max-height: 200px !important;
}

Not overlap body content with header when viewed in a narrower window.

Remove margin-top from .content-wrapper {float:top; margin-top:40px}". This alongside with the previous change should be sufficient.

Complete CSS including yours:

.skin-blue .main-header .navbar {background-color: #3333cc}
.skin-blue .main-header .navbar .sidebar-toggle:hover {background-color: red}
.skin-blue .main-header .logo {background-color: #3333cc;border-bottom: 0 solid transparent;}
.skin-blue .main-header .logo:hover {background-color: #3333cc;}
.content-wrapper {float:top;}
.wrapper {overflow-y: hidden;}
.main-header {
  max-height: 200px !important;
}
.sidebar-toggle {
  float: right !important;
}

.main-header .logo {
  line-height: 85px !important;
  padding: 0px 0px;
}