Adding a logo in dashboard header does not work with bs4Dash library. Any suggestions?
# app.R ##
library(shiny)
library(shinydashboard)
library(bs4Dash)
library(shinydashboardPlus)
ui <- dashboardPage(
dashboardHeader(# removed some lines
title = div("", id = "home_logo", a(href = "#Home",
)),
controlbarIcon = shiny::icon("filter")
),
dashboardSidebar(
collapsed = TRUE
),
dashboardBody(
# new code 9 lines
tags$head(tags$style(HTML('
/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
background-image:url("https://www.r-project.org/logo/Rlogo.png");
background-position-x: 2%;
background-size: 70px 40px;
background-repeat: no-repeat;
background-color:#000;
}
/* logo */
.skin-blue .main-header .logo {
background-color: white;
}
/* logo when hovered */
.skin-blue .main-header .logo:hover {
background-color: white;
}
/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
background-color: white;
}
/* body */
.content-wrapper, .right-side {
background-color: white;
}
/* main sidebar */
.skin-blue .main-sidebar {
background-color: snow;
}
/* toggle button when hovered */
.skin-blue .main-header .navbar .sidebar-toggle{
background-color: black;
}
/* toggle button when hovered */
.skin-blue .main-header .navbar .sidebar-toggle:hover{
background-color: black;
}
'))),
tags$style(type="text/css",".sidebar-toggle{ position: absolute;
}
.skin-white .main-header .logo, .skin-blue .main-header .logo, .skin-blue .main-header .logo:hover{
background-color: white;}"),
),
controlbar = dashboardControlbar(id = "dashboardControlbarID", collapsed = TRUE,skin = "black",icon = icon("filter"))
)
server <- function(input, output) {}
shinyApp(ui, server)
How about using an img-tag:
title = tags$img(src = 'https://www.r-project.org/logo/Rlogo.png', title = "Rlogo", height = "40px")
Full example incl. a link:
library(shiny)
library(bs4Dash)
ui <- dashboardPage(
dashboardHeader(title = a(target="_blank", href = 'https://www.r-project.org/',
img(src = 'https://www.r-project.org/logo/Rlogo.png', title = "Rlogo", height = "40px"),
style = "padding-top:5px; padding-bottom:5px;")),
dashboardSidebar(),
dashboardBody(
# Boxes need to be put in a row (or column)
fluidRow(
box(plotOutput("plot1", height = 250)),
box(
title = "Controls",
sliderInput("slider", "Number of observations:", 1, 100, 50)
)
)
)
)
server <- function(input, output) {
set.seed(122)
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[seq_len(input$slider)]
hist(data)
})
}
shinyApp(ui, server)