CODEWITHSUNDEEP
htmlcssshinyshinydashboard
galaxy--
galaxy--

Reputation: 172

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

Upvotes: 0

Views: 750

Answers (1)

lz100
lz100

Reputation: 7340

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?

Upvotes: 1

Related Questions