简体   繁体   中英

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在此处输入图像描述

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

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)

在此处输入图像描述

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM