How have a image in the center of the dashboard header in Shinydashboard R?

Question

I have the following code that makes a simple shiny app.

```
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)
```

And the image is outputted on top of the menu to the right, but my goal would be to have the image be more in the middle of the dashboard. I know the menu shifts the navabr a bit but I would like to keep it as center as possible.

But my desired output would be like this. I made a sample with paint. Is it possible to still have some text or if a reference can be posted where I can learn more about the dashboard header function I would appreciate it.

Added the code as I accidently posted the question without including it. — RL_Pug, Jan 12 '22 at 15:32
[This](https://stackoverflow.com/a/36062742/9841389) will get you half way there. — ismirsehregal, Jan 12 '22 at 15:52

lz100 · Accepted Answer · 2022-01-13T21:58:01.237

Here you go

There is no way you can add the image to the header part on the right side with the function from shinydashboard, but let's have fun with the latest htmltools by injecting styles and tags into the header.

library(shinydashboard)
library(shiny)
header_img <- 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',
    style = 'height: 50px; width: 100px; position: absolute; left: 50%; transform: translateX(-50%);'
)
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 <- dashboardPage(
    header,
    dashboardSidebar(
        sidebarMenuOutput("menu")
    ),
    dashboardBody()
)

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

The img is placed on the center of right side header, not the center of the entire header length. If you want to adjust to the center of the whole length, try to change translateX(-50%) of the img to a number you like.

How to add a image on the left side, a text on middle and a image on right side on header? — Masoud, Jan 23 '22 at 10:56
use `append` to inject your components into the header. change the CSS `left` or `right` to make it align to left or right. or you can use `flex` layout, but inject order matters with `flex`. You can google these CSS terms if you are not familiar. — lz100, Jan 23 '22 at 21:26

How have a image in the center of the dashboard header in Shinydashboard R?

1 Answers1

Linked