gatsby-theme-catalyst-header-top

Sibling theme for gatsby-theme-catalyst-core to add basic header styles.

Usage no npm install needed!

<script type="module">
  import gatsbyThemeCatalystHeaderTop from 'https://cdn.skypack.dev/gatsby-theme-catalyst-header-top';
</script>

README

Gatsby Theme Catalyst Header Top

Sibling theme for gatsby-theme-catalyst-core which adds a traditional site header and navbar using latent component shadowing. Branding on the left, navigation on the right. Theme options are set set via gatsby-theme-catalyst-core, for example setting displaySiteTitle: false and displaySiteTitleMobile: false will only show the logo for branding.

Documentation

https://www.gatsbycatalyst.com/

Demos

Theme Options

Option Values Description
useStickyHeader true or false Defaults to false, controls whether the header is sticky or static
useHeaderSocialLinks true or false Defaults to true, controls whether the social links are displayed or not
useColorMode true or false Defaults to true, controls whether the dark mode toggle is available.

About Gatsby Theme Catalyst

The Catalyst series of themes and starters for GatsbyJS were designed to provide an opinionated set of integrated themes and starters that can be used to accelerate your next Gatsby project. The vision is for one "core" theme in which most dependencies and components are contained followed by progressively more styled and refined child themes and starters. These themes rely heavily on Theme-UI and MDX.