image logo over TOC in Rmarkdown

Question

I know I can insert a logo or image at the top of HTML report rendered using knitr with in_header/before_body options

output:
  html_document:
    includes:
      before_body: header.Rhtml

My guess is: how to render logo over floating TOC?

output:
  html_document:
    toc: true
    toc_float: true
    collapsed: false
    ??????

Answer 1

You got a few options here and I will outline two of them

1. Use the CSS pseudo element before

The following snippet will add the stackoverflow logo just above the first TOC element and within the TOC box:

<style>
#TOC {
  background: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a");
  background-size: contain;
  padding-top: 80px !important;
  background-repeat: no-repeat;
}
</style>

Here you will have to adjust the padding-top definition depending on your logo. The result looks more or less like this:

2. Add a new DOM element inside the TOC column

Another way is to use jQuery first in order to add a new DOM element that will contain the image:

<script>
  $(document).ready(function() {
    $('#TOC').parent().prepend('<div id=\"nav_logo\"><img src=\"https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a\"></div>');
  });
</script>

Here, when the document has finished loading, we select the element with the id TOC, then move up to its parent element (the column div) and then prepend a new div with the id nav_logo containing the image. Sounds more complicated than it actually is. Now we only have to edit the styles for this new div with some CSS again:

<style>
#nav_logo {
  width: 100%;
  margin-top: 20px;
}
</style>

Here the resulting document looks like this:

For details on CSS I would refer you to the big search engines which in turn will most probably refer you to https://www.w3schools.com.

If I would have to pick, I would go with the second attempt. Pseudo elements are not always reliable across browsers. And it also looks better :)