'How to make shiny dashboard app/logo bigger?

I have the following code that makes a simple shiny app. My goal is to make the image/logo bigger and push the sidebar menu down a little bit.

library(shinydashboard)
library(shiny)
ui <- dashboardPage(
  dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '60', width ='100')),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody()
)

server <- function(input, output) {
  output$menu <- renderMenu({
    sidebarMenu(
      menuItem("Overview", icon = icon("tachometer"))
      
    )
  })
}
shinyApp(ui, server)

This code above yields the following output. enter image description here

My desired output this something like this where the image is bigger.

enter image description here

Although if I try editing the width/height directly on the tags$img() it will make the image larger but it becomes cut off as seen below.

ui <- dashboardPage(
  dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
                                   height = '120', width ='200')),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody()
)

enter image description here



Solution 1:[1]

You can add css elements to override the default css from library(shiny) https://shiny.rstudio.com/articles/html-tags.html

library(shinydashboard)
library(shiny)
ui <- dashboardPage(
  dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '120px', width ='200px')),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  
  dashboardBody(
    tags$head(
      tags$style(".skin-blue .main-header .logo {
color: #fff;
border-bottom: 0 solid transparent;
height: 125px;
}"),
tags$style(".skin-blue .sidebar a {
    color: #b8c7ce;
    padding-top: 50%;
}"), 
tags$style(".main-header .navbar{
           max-height: 10px;")
    )
  )
)
server <- function(input, output) {
  output$menu <- renderMenu({
    sidebarMenu(
      menuItem("Overview", icon = icon("tachometer-alt"))
      
    )
  })
}
shinyApp(ui, server)

sample

sample 2

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1