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

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