Search code examples
rshinydashboard

Add a company logo right after shiny dashboard header toggle button

How can I add a company logo right after the toggle button that is in shiny dashboard header like: enter image description here

## app.R ##
library(shiny)
library(shinydashboard)



ui <- dashboardPage(
  dashboardHeader(
    titleWidth = 0,
    title = div("", id = "home_logo", a(href = "#Home",
                                        (img(src = "http://www.google.com/s2/favicons?domain=stackoverflow.com", height = "25px", 
                                             style = "position: relative; top:-5px; left: -40px;")) ))

  ),
  dashboardSidebar(
    collapsed = TRUE
    
    
  ),
  dashboardBody(

    
    tags$style(type="text/css",".sidebar-toggle{ position: absolute;
    left: 23rem;
}
.skin-white .main-header .logo {
    background-color: #3c8dbc;}"),
    
    
  )
  )                                

server <- function(input, output) {
  
  
}

shinyApp(ui, server)
Solution

  • Something like this with CSS?

    ## app.R ##
library(shiny)
library(shinydashboard)



ui <- dashboardPage(
  dashboardHeader(
    title = div("", id = "home_logo", a(href = "#Home",
                                        (img(src = "http://www.google.com/s2/favicons?domain=stackoverflow.com", height = "25px", 
                                             style = "position: relative; top:-5px; left: -5rem;")) ))
    
  ),
  dashboardSidebar(
    collapsed = TRUE
    
    
  ),
  dashboardBody(
    
    
    tags$style(type="text/css",".sidebar-toggle{ position: absolute;
    left: -23rem;
}
.skin-white .main-header .logo, .skin-blue .main-header .logo, .skin-blue .main-header .logo:hover{
    background-color: #3c8dbc;}"),


  )
)                                

server <- function(input, output) {
  
  
}

shinyApp(ui, server)