title: Shiny Dashboadpage lock dashboardHeader on top
body: <p>I use R Shiny Dashboardpage to build my interactive dashboard. I want to lock the dashboardHeader and sidebarMenu so that when scrolling, the header and sidebar remain on the same position.</p>
  
  <p>For the sidebarMenu, this can be done in the CSS:</p>
  
  <pre><code>.skin-blue .main-sidebar {
    position: fixed; 
    overflow: visible;
  }
  </code></pre>
  
  <p>However, when you try the same trick for the dashboardHeader, it fails. It places the dropdownMenus (the notification icons) on the left, instead of on the top right corner.</p>
  
  <p>How can I fix the header without changing the design of my Shiny application?</p>
  
  <p>Minimal working example:</p>
  
  <p>app.R:</p>
  
  <pre><code>## app.R ##
  library(shinydashboard)
  
  ui &lt;- dashboardPage(
    dashboardHeader(title = "Basic dashboard",
      dropdownMenu(type = "messages",
        messageItem(
          from = "Sales Dept",
          message = "Sales are steady this month."
        )
      )
    ),
    dashboardSidebar(
      sidebarMenu(
        menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
        menuItem("Widgets", tabName = "widgets", icon = icon("th"))
      )
    ),
    dashboardBody(
      ## Add some CSS shit to change colors, width, etc.
      tags$head(
        tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
      ),
      fluidRow(
        box(plotOutput("plot1", height = 2500))
      )
    )
  )
  
  server &lt;- function(input, output) {
    histdata &lt;- rnorm(500)
  
    output$plot1 &lt;- renderPlot({
      data &lt;- histdata[1:50]
      hist(data)
    })
  }
  
  shinyApp(ui, server)
  </code></pre>
  
  <p>www/custom.css:</p>
  
  <pre><code>/* logo */
  .skin-blue .main-header .logo {
    position: fixed; 
    overflow: visible;
  }
  
  /* navbar (rest of the header) */
  .skin-blue .main-header .navbar {
    position: fixed; 
    overflow: visible;
  }        
  
  /* main sidebar */
  .skin-blue .main-sidebar {
    position: fixed; 
    overflow: visible;
  }
  </code></pre>