CODEWITHSUNDEEP
rshinyshinydashboard
firmo23
firmo23

Reputation: 8404

Move logo to the left side of dashboard header in shiny dashboard

I have a shiny dashboard with a company logo in the right side of the header but I would like to move it to the left. Here's my try (put your logo, into a www subdirectory of your app directory). Because dashboardHeader() expects a tag element of type li and class dropdown, we can pass such elements instead of dropdownMenus. I also need the text in the header to be visible normally.

library(shiny)
library(shinydashboard)

dbHeader <- dashboardHeader(title = "My Dashboard",

                            tags$li(a(href = 'http://www.company.com',
                                      img(src = 'company_logo.png',
                                          title = "Company Home", height = "30px"),
                                      style = "padding-top:10px; padding-bottom:10px;"),
                                    class = "dropdown"))

server <- function(input, output) {}

shinyApp(
  ui = dashboardPage(
    dbHeader,
    dashboardSidebar(),
    dashboardBody(
      tags$head(tags$style(HTML(
        '.myClass { 
        font-size: 20px;
        line-height: 50px;
        text-align: left;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        padding: 0 625px;
        overflow: hidden;
        color: white;
      }
    '))),
      tags$script(HTML('
      $(document).ready(function() {
        $("header").find("nav").append(\'<span class="myClass"> ABCD Hypothesis Generation Model </span>\');
      })
     '))
    )
  ),
  server = server
)

Upvotes: 0

Views: 1412

Answers (1)

Bas
Bas

Reputation: 4658

The item you want to move is a div with class .navbar-custom-menu.
Add this to your custom css in tags$head(tags$style(HTML(...))) to force it to float left:

.navbar-custom-menu {
       float: left!important;
}

The !important is necessary to prevent it from being overwritten by css elsewhere.

Upvotes: 2

Related Questions