Minimal Mistakes : Side bar and TOC

1

Hello,

I managed to create side bars and TOC on my minimal mistakes prototype: https://root-project.github.io/web/Resources/Doxygen/

I also managed to make the top menu bar fixed.

But now when scrolling the page you can see that the top of the side bar (on left) and the top of the TOC (on right) collide/“go under” the top bar.

Do you know which parameter I should change to void these issues ?

Thanks in advance for any help…

2

You’ll need to tinker with the CSS some more to make the sidebars clear the masthead.
Easiest way to determine what you need to modify is fire up your browser’s web developer tools and start inspecting elements.

If you inspect the .masthead you’ll see it has a height: 65px. You’ll want the sidebars’ top margin to be >= this value (ideally more to give you some extra space).

For the sticky sidebars add:

.sticky,
.sidebar__right.sticky {
  height: 75px; // 65px plus some additional pixels, modify to your taste
}

Which gives you something like this

image
image.png1354×807 45.5 KB

3

Thanks for your reply. It is not (yet) clear to me where to add this …

4

You add any custom CSS after the @import lines in /assets/css/main.scss

5

Thanks,

I added the lines you suggested in the main.css file. This file now looks like:

---
# Only the main Sass file needs front matter (the dashes are enough)
---

@charset "utf-8";

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
@import "minimal-mistakes"; // main partials

.sticky,
.sidebar__right.sticky {
  height: 75px; // 65px plus some additional pixels, modify to your taste
}

Nothing changes, the sidebar and the TOC still go under the top bar when scrolling the page. I’ll try to find an other solution. Thanks.

6

Not much success until now. Could you post the (entire) files you changed allowing to obtain the screen dump your posted earlier ?