hugo-theme-relearn/exampleSite/content/configuration/sidebar/width/_index.en.md

+++ categories = ["howto"] description = "Changing the width of the sidebar" title = "Width" weight = 1 +++

The theme adjusts the menu width based on browser size.

If you want to change the chosen default width, you can add CSS variables to layouts/partials/custom-header.html.

Changing Menu Width

The menu width changes for different screen sizes:

Screen Size	Screen Width	Menu Width
Small	< 48rem	14.375rem
Medium	48rem - 60rem	14.375rem
Large	>= 60rem	18.75rem

You can change the menu width but not the screen width breakpoints.

To adjust the menu width, use these CSS variables. Note that --MENU-WIDTH-S is for the mobile menu flyout on small screens.

<style>
:root {
    --MENU-WIDTH-S: 14.375rem;
    --MENU-WIDTH-M: 14.375rem;
    --MENU-WIDTH-L: 18.75rem;
}
</style>