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

css

#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:

Would this be possible at all?


#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

Thank you so much for your help, Tyler.