Sphinx alabaster theme scroll inside of fixed sidebar

Question

I have made a sphinx project/documentation (using the alabaster theme) that has a fixed sidebar on the left (containing the TOC), but has too much content to display on the screen. How can I make that content scrollable while still allowing the right side (the main text) to be scrollable separately?

I have seen this question which is similar, but only deals with your own website, and not a sphinx alabaster themed documentation.

Crescentic

Look at the generated HTML and CSS and compare it with a theme that does what you want, maybe sphinx_rtd_theme. Copy the CSS for the features you want into the Alabaster theme. – Espresso

One problem is that the CSS in the sphinx_rtd_theme is obfuscated into 1 line, and it is hard to read. I'll try nevertheless. – Crescentic

Answer 1

It turns out the solution is hidden on this github PR. Create a file named custom.css that is in the _static folder. Then, in conf.py, add this code:

html_static_path = ['_static']

What that does is tell sphinx to override the default CSS, allowing you to enter your own CSS. Then, in the custom.css file, add this code:

div.sphinxsidebar {
    max-height: 100%;
    overflow-y: auto;
}

That code makes the scroll bar appear and is what worked for me. This is what the end result looks like:

Crescentic

Answer 2

Since the OP is using Alabaster theme, using theme option fixed_sidebar helps both pinning the sidebar to the top as well as invoking the scrollbar.

html_theme_options = {
    ...,
    'fixed_sidebar': True,
}

Checked with rel 0.7.16 and it works.

Succussion