Search code examples
htmlcssscrollpython-sphinx

Sphinx alabaster theme scroll inside of fixed sidebar

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.

Solution

  • 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: Documentation with scroll bar