Search code examples
htmlcssshinyshinydashboard

shinydashboard, logo and title in navbar?


Is there a way in shinydashboard that both the Title and logo appear in the navbar and that there is also a subtitle?

a MWE and a picture how I would want it to be library(shiny) library(shinydashboard)

ui <- function(){

  dashboardPage(

    dashboardHeader(title=div(h4('Title'), h5('Subtitle')),
                    tags$li(a(img(src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", height="45px")), class="dropdown")),
                            dashboardSidebar(),
                            dashboardBody())}

server <- function(input, output, session) {}

shinyApp(ui=ui, server = server)

This is how I wish it to look like enter image description here

I know to bring the logo in the navbar to the left I have to use

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

but I do not know how to add both text as well as the logo in the navbar side by side


Solution

  • try this:

    library(shiny)
    library(shinydashboard)
    
    header_img <- div(
        img(src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", height="45px"),
        div(
            class = "my-title",
            h4('Title'), h5('Subtitle'),
            tags$style(".my-title :is(h4, h5){color: white; font-weight: bold;}")
        ),
        style = "display: flex;"
    )
    
    header <-  htmltools::tagQuery(dashboardHeader(title = ""))
    header <- header$
        addAttrs(style = "position: relative")$ # add some styles to the header 
        find(".navbar.navbar-static-top")$ # find the header right side
        append(header_img)$ # inject our img
        allTags()
    
    ui <- function(){
        dashboardPage(
            header,
            dashboardSidebar(),
            dashboardBody()
        )
    }
    
    server <- function(input, output, session) {}
    
    shinyApp(ui=ui, server = server)
    

    enter image description here

    There is another similar question: How have a image in the center of the dashboard header in Shinydashboard R?