Search code examples
cssrr-markdown

Adding an image in navbar and adjusting alignment in Rmarkdown

I'm building a simple webpage where I'd like to have a logo in the navbar instead of a title of the webpage. I managed to put the logo in, but it's either tiny (at 30px), or goes out of the bounds of the navbar, and I cannot seem to adjust the position, no matter what I tried. I looked at How do I add custom logo in navbar title field in rmarkdown? and R Markdown: Putting an image in the top right hand corner of HTML and moving title down and tried their solutions, but what I see is still:

enter image description here

Here is my _site.yml code:

name: "mywebpage"  
author: "Authors"  
output_dir: "docs"  
output:  
  html_document: 
    self_contained: no  
    theme: default
    css: style.css
navbar:  
  title: "<img src='WebsiteLogo.jpg' alt='Logo' style='width: 50px; height: 50px;'> "
  right:
  - text: "About the project"
    href: index.html
  - text: "Participate"
    href: participate.html
  - text: "Meet the team"
    href: team.html
  - text: "Activities and publications"
    href: outputs.html
  - text: "Contacts"
    href: contacts.html

The moment I remove style='width: 50px; height: 50px;', my logo takes over the whole page, although I have been playing with the style.css.Rmd options as well (which seems to change absolutely nothing). Here is the current style document:

a:link {
  color: #003366;
  background-color: transparent;
}

a:visited {
         color: #002147;
         background-color: transparent;
         text-decoration: none;
}
a:active {
         color: #001A33;
         background-color: transparent;
  
}

body {
  font-size: 4em;
  font-family: "Arial", sans-serif;
  color: #000000;
  background-color: #313A62;
}

.navbar {
  width: 50%;  
  max-width: 60px;  
  margin: 0 auto;  
  padding: 10px 10px;
  background-color: #313A62;
}

.navbar .navbar-title img {
  height: 10%;         
  width: 10%;          
  vertical-align: top;  
  margin-top: 0;        
}
Solution

  • In your style.css you only need to add the following with !important to overwrite the bootstrap.min.css

    style.css

    .navbar-brand {
    padding: 0px !important;  
}

    out

    _site.yml

    name: "mywebpage"  
author: "Authors"  
output_dir: "docs"  
output:  
  html_document: 
    self_contained: no  
    theme: default
    css: style.css
        
navbar:  
  title: "<img src='https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg' alt='Logo' style='width: 50px; height: 50px;'> "
  right:
  - text: "About the project"
    href: index.html
  - text: "Participate"
    href: index.html

    index.rmd

    ---
title: "About the Project"
output: html_document
date: "2025-03-03"
---

    File Structure

    • index.rmd
    • _site.yml
    • style.css

    You can also make your Logo even larger with the following css and img style='width: 75px; height: 75px;'.

    out2

    .navbar-brand {
    padding: 0px !important;  
    height: 75px !important; /* increase navbar height */
}

.navbar-nav>li>a {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    line-height: 45px !important; /* adjust buttons accordingly */
}