Adding images in the title and at the right of navbarPage

I would like to include a small image at the left of the title of my navbarPage, and to include another image completely at the right of this same navbarPage. I found this answer which provides the same layout than the one I would like to have. The problem is that this solution does not provide a fully reproducible example and I can't figure out how to include the chunks of code in the ui part.

Does anybody know how to make a reproducible example from this answer?

Hi, I would ask you to consider providing a reprex containing minimal code that shows your app appearance , in its current less than desired state, then it will be easier for others to suggest changes to it, than to begin from scratch and re-do work that you have already done

@nirgrahamuk Sure, here is what I tried to do but it is not very different from the answer linked in the first post since I don't really know how to use HTML:

library(shiny)

ui <- navbarPage(
  tags$script(HTML("var header = $('.navbar > .container-fluid');
 header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
  )),
  tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><ahref=\"URL\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </a>`</div>');
    console.log(header)")
  ),

  title = div(img(src="image.png", height = '40px', width = '40px'), "something"),
  tabPanel("foo")
)
server <- function(input, output, session) {
  
}

shinyApp(ui, server)

This is the image called image.png. I put it in the www folder, which is placed in my app directory.

There are mainly two things to solve:

  • some text is displayed on the below the navbar whereas it shouldn't be displayed at all
  • the image and the text at the left are not centered

Also asked on SO

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.