Placing an image on the right end of the navigation bar in the navbarPage() layout

shiny
1

I'm using the Superzip shiny app as an example, for which the code is here.

I would like to place an image on the right end of the navigation bar page (let's say the R Studio logo) as highlighted with the red box in the screenshot below:

ZngFt.png2003×181 98.3 KB

Would this be possible at all?

1 Like
2

You can do this by adding an img tag in the navbarPage()'s title argument. It would look like this:

navbarPage(
  title = div(
    div(
      id = "img-id",
      img(src = "path/to/img.png")
    ),
    "Superzip"
  ),

  # Insert rest of ui code
)

Then in you can style the img-id div as follows (this would be what it would look like in styles.css script in that repo):

#img-id{
  position: fixed;
  right: 10px;
  top: 5px;
}

You will probably have to play around with the top and right css values but that should give you what you are looking for.

3 Likes
3

Thank you so much for your help, Tyler.