Gatsby Theme Catalyst Header Big Top
Sibling theme for gatsby-theme-catalyst-core which adds a “big” site header and navbar using latent component shadowing. Branding/Logo on top, large. Navigation underneath the logo. Social links in the top right corner. 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.
Note this header does not support the useStickyHeader theme option. The header is static when in “desktop” view and “sticky” when in mobile view. This behaviour could be changed via variants if needed.
You can see a styled implementation of this in gatsby-theme-catalyst-helium.
Documentation
https://www.gatsbycatalyst.com/
Demos
Theme Options
| Option | Values | Description |
|---|---|---|
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.