Header

Hugo Paradigm Docs

Product Page | Changelog

This theme has a versatile header that can be fixed, animated on scroll, transparent (over images and backgrounds) and inverted.

# data/layout.yaml

header:
  headerFixed: false
  headerHeight: '60px' # recommended "60px"
  disableHamburgerMenu: false

SetheaderFixed: true`. The header will animate on scroll, changing the background from transparent to white and adding a boxshadow.

# data/layout.yaml

header:
  headerFixed: true

You can set a transparent header on a per page 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

Change the height of the header.

# data/layout.yaml

header:
  headerHeight: '60px' # recommended "60px"

If you are building a single page site you can disable the hamburger menu on mobile.

# data/layout.yaml

header:
  disableHamburgerMenu: true