Logo over TOC

[MaxThom]

Question

Hi,

I have a mdbook where I modified the index.hbs to add a logo above the TOC:

I have upgraded to the latest version v0.4.42 and readjusted the index.hbs and all the theme contents and since then I can't get my logo working. The TOC is always over it. I have tried a bunch of things such as modifying the css of the scrollbar to relative which work, but then I loose the scrollbar:

Snippet of my added div:

        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
            <div class="logo">
       		   <img alt="{{ book_title }}" width=148px src="{{ path_to_root }}logos/mir_alpha.png">
            </div>
            <!-- populated by js -->
            <mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
            <noscript>
                <iframe class="sidebar-iframe-outer" src="{{ path_to_root }}toc.html"></iframe>
            </noscript>

            <div id="sidebar-resize-handle" class="sidebar-resize-handle">
                <div class="sidebar-resize-indicator"></div>
            </div>
        </nav>

I tried adjusting the scrollbar css to relative, or top padding which work, but something else break. If I had the div inside the mdbook-sidebar-scrollbox, the logo does below the TOC.

Any idea on how to achieve this? Thank you!

Version

v0.4.42

[ehuss]

@notriddle Can you help here?

[notriddle]

The simplest way to fix this, without changing anything else, would be to modify toc.js.hbs:

mdBook/src/theme/toc.js.hbs

Line 11 in d107843

this.innerHTML = '{{#toc}}{{/toc}}';

If you insert your <div> before the {{#toc}} placeholder, it will appear at the top of the sidebar, within the scrollbox.