Changing sidenav elements#

Bulma sphinx theme supports customising the elements that show up in the sidenav (left).

Changing sidenav width#

Bulma sphinx theme allows specifying the width of sidenav, the sidenav width is 20% by default. To change the width, you need to provide the sidenav-width css variable configuration value to Bulma sphinx theme, for example,

html_theme_options = {
    "css_variables": {
        "sidenav-width": "320px",
    }
}

Changing sidenav background#

We can also specify the sidenav background (light color or dark color). To change the background, you need to provide the bst-color-background-sidenav color variable value to Bulma sphinx theme, for example,

html_theme_options = {
    "light_colors": {
        "bst-color-background-sidenav": "rgb(240, 248, 255)",
    },
    "dark_colors": {
        "bst-color-background-sidenav": "black",
    },
}

Note

Bulma sphinx theme does not check the value of the color variable, make sure you provide the right value to make it work!

Last updated on Jan 16, 2024.

Navbar configuration

Source Buttons