Header Breakpoint

September 3, 2023 1 min read Modules News Header Breakpoint

The header module introduces a new parameter called breakpoint that used by collapsing and expanding.

Donate

Become a backer or sponsor to support our work.

On this page

Backgrounds

The header was initially designed to be collapsed when the width is less than xxl breakpoint, otherwise expanding. The problem is that the header collapsed and looks empty under the lg and xl breakpoint. So we introduce the breakpoint parameter, and use the lg as default to suit most of the cases.

Usage

hugo.toml

1[params]
2  [params.hb]
3    [params.hb.header]
4      breakpoint = 'xl'

hugo.yaml

1params:
2  hb:
3    header:
4      breakpoint: xl

hugo.json

1{
2   "params": {
3      "hb": {
4         "header": {
5            "breakpoint": "xl"
6         }
7      }
8   }
9}