2

I'm looking to replicate a similar layout as RStudio's SuperZip Shiny dashboard available here: https://shiny.rstudio.com/gallery/superzip-example.html

The code for that app is available here: https://github.com/rstudio/shiny-examples/tree/master/063-superzip-example

Based off that code, I would like to add an image on the right end of the navigation bar (let's say the Rstudio logo), highlighted with the red box in the image below. I assume I'd need to add some HTML and CSS code but I'm unsure on how to proceed.

enter image description here

My question is similar to this question: How can I insert an image into the navbar on a shiny navbarPage()

However, note that the answer provided an indication on putting an image on the LEFT END of the navigation bar. I'm asking to have it on the RIGHT END of the navigation bar.

braaterAfrikaaner
  • 1,072
  • 10
  • 20
Phil
  • 7,287
  • 3
  • 36
  • 66

2 Answers2

11

The linked solution is probably not gonna work for placing the logo on the right. I would suggest using some JavaScript code to append the logo to the navbar.

Solution:

  1. Create the JS file (I named my file code.js)

When the app is finished loading, it's gonna append the logo to the navbar. (Image is aligned to the right)

$( document ).ready(function() {
  $( ".navbar .container-fluid" ).append( '<img src="logo.png" align="right">' );
});

  1. Place the logo (in my case logo.png) and the JS file inside the www folder.

  2. Include the js file in tags$head

You need to use tagList with navbarPage because otherwise a clickable "ghost" tab would appear on the navbar.

ui <- tagList(
  tags$head(tags$script(type="text/javascript", src = "code.js")),
  navbarPage(title = "Right aligned logo",
             tabPanel("tab1"),
             tabPanel("tab2")
  )
)

Result

GyD
  • 3,902
  • 2
  • 18
  • 28
  • I have trouble with this approach if I also include `tags$style(type="text/css", "body {padding-top: 70px;}")` in the `tagList` to make sure my nav bar doesn't overlap with the content. Any idea how to fix it? – moho wu Feb 13 '18 at 16:21
  • How is the `navbar` overlapping with the content? You should maybe post a new question on SO with a reproducible example. – GyD Feb 14 '18 at 11:17
  • If you use `position = "fixed-top"`, then the navbar will overlay the content. It's in the `navbarPage` help file. I think this is related to and can improve this answer since many people would use this option. – moho wu Feb 14 '18 at 11:21
  • Okay, now I see. In that case you could add: `tags$head(tags$style(type="text/css", ".tab-content {padding-top: 70px;}"))` – GyD Feb 14 '18 at 11:36
  • unable to reproduce this. I have files ( js and .png) in www folder. Not sure what I am missing here, can you re-check this ? Also, is there any shinyjs package solution ? I get this browser error "The script from “http://127.0.0.1:584/custom.js” was loaded even though its MIME type (“text/html”) " – user5249203 May 17 '19 at 13:35
  • 1
    @GyD can i add hyperlink to the logo? – John Smith Jan 01 '20 at 20:39
  • 2
    @JohnSmith Yes, you can. Instead of `.append( '' );` you can include the `img` in an `a` (link) tag, like this: `.append( '' );` – GyD Jan 02 '20 at 09:53
2

I got some help elsewhere, and I'm posting it here:

In the ui.R code:

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

  # Insert rest of ui code

In the styles.css script:

#img-id{
  position: fixed;
  right: 10px;
  top: 5px;
}
Phil
  • 7,287
  • 3
  • 36
  • 66
  • It's a great solution, except it doesn't remove the ghost tab after the `tabPanel`s, see: https://imgur.com/a/mucZD – GyD Jan 31 '18 at 07:10
  • I just checked on my work computer, and I don't see the ghost tab now (Maybe it was my mistake...). The only issue remaining with this solution is that the `title` showing in the browser is gonna be `
    ` which is kind of ugly, otherwise I would probably prefer this over using js.
     – GyD Jan 31 '18 at 10:13
  • Thanks for the response. I do prefer your answer as I think it is more generalized. – Phil Jan 31 '18 at 15:05
  • You can update the title with: `jsTitleChange <- 'Shiny.addCustomMessageHandler("changetitle", function(x) {document.title=x});` and then `session$sendCustomMessage("changetitle", "new title")` so it doesn't look ugly on the browser. – Leonardo Siqueira Aug 22 '21 at 15:34