How to add a link to logo using flexdashboard?

Question

I added a logo to my dashboard following the flexdashboard doc page . Now I'd like to be able to click on the logo and be re-directed to an external page.

I know that you can hyperlink an image with r-markdown with something like:

[![alt text](path to image)](web link to website)

I'm just struggling to integrate that into the logo in the navigation bar of the flexdashboard. Does anybody know how to do it? Thanks!

I added the logo with these lines:

---
title: "My Report"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    css: style.css
    logo: my-logo.png
---

Answer 1

One way is to alter the logo in the loading process using jQuery. Add these lines underneath your YAML header:

<script>
$('.navbar-logo').wrap('<a href="http://www.google.com">');
</script>

We simply select the HTML element that is part of the class navbar-logo and wrap an hyperlink tag around it.

If you want the external website to open in a new tab, add target=_blank to the a element:

<a href="http://www.google.com" target=_blank>