nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-31 08:57:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

menu: doc the breakpoints #677

Browse source
This commit is contained in:
Sören Weber 2023-10-05 18:13:52 +02:00
parent 87b51bb67f
commit 8a6b61a859
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
1 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
exampleSite/content/basics/customization/_index.en.md
View file

@ -61,13 +61,22 @@ If you need to change this default behavior, create a new file in `layouts/parti
## Change the Menu Width
If you want to adjust the menu width you can define the following CSS variables in you `custom-header.html`. Note that `--MENU-WIDTH-S` isn't adjustable because the menu is
hidden for small screen widths.
The menu width adjusts automatically for different screen sizes.
| Name | Screen Width | Menu Width |
| ---- | ------------- | ---------- |
| S | < 48rem | 0 |
| M | 48rem - 60rem | 14.375rem |
| L | >= 60rem | 18.75rem |
The values for the screen width breakpoints aren't configurable.
If you want to adjust the menu width you can define the following CSS variables in your `custom-header.html`. Note that `--MENU-WIDTH-S` doesn't exist as the menu is always hidden for small screen sizes.
````css
:root {
--MENU-WIDTH-M: 15rem;
--MENU-WIDTH-L: 20rem;
--MENU-WIDTH-M: 14.375rem;
--MENU-WIDTH-L: 18.75rem;
}
````