Search code examples
rflexdashboard

How to add logo to right hand corner of navbar in flexdashboard?


I am building a dashboard in R using the flexdashboard package (image attached below). I'm looking for a solution to add a logo in the right hand corner of my nav-bar in a way that keeps the size of my nav-bar unchanged

Here is my YAML

---
title: "Inflation & PSCE Outlook"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---
<style>
.navbar, [data-toggle=tab], .navbar-brand  {   background-color:#75002B;   border-color:black;   color:white; }
</style>




Solution

  • You can specify a logo image for your dashboard using the logo option, seen below.

    Adding the logo to the right hand side can be done with the following css.

    ---
    title: "Inflation & PSCE Outlook"
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill
        logo: path/to/logo.png
    ---
    <style>
    .navbar, [data-toggle=tab], .navbar-brand  {   background-color:#75002B;   border-color:black;   color:white; }
    
    .navbar-logo img {
        position: absolute;
        right: 0px;
    }
    </style>