Header

This theme has a versatile header that can be fixed, animated on scroll, transparent (over images and backgrounds) and inverted. By default the header is fixed and will animate on scroll.

Fixed header

# data/layout.yaml

header:
  headerFixed: true

Animate on scroll

As long as the header has the class header-fixed or headerFixed: true is enabled in the data/layout.yaml it will animate on scroll, changing the background from transparent to white and adding a boxshadow.

Transparent header

If you want the header to be transparent over the top of an image or background color then add the class header-transparent. You can add this class to the header on a per template basis.

As an example, custom page 1 https://hugo-paradigm.netlify.app/custom-page-1/ has a transparent header because it looks stylish over the hero section’s blue background image.

You can set the header to be transparent from the front-matter of a markdown file. Just set headerTransparent: true

title: Custom Page Example 1
headerTransparent: true

The layout file will then add the class header-transparent automatically.

{{ define "header_classes" }}{{ if .Params.headerTransparent }}header-transparent{{ end }}{{ end }}