Sticky Header (Pro)

The Sticky Header module enables a fixed position or "sticky" header for your site. To get started with the Sticky Header, navigate to Header > Sticky Header and select which screen sizes it should be enabled on:


By default, the sticky header will inherit the default colors from the Primary Header and Primary Menu sections. There are more color settings provided for the Sticky Header which will override the defaults, allowing you to set different colors for the Sticky Header only:

Different Logo

You may want to use a different logo for the sticky header only. To do this, navigate to Header > Sticky Header in the Customizer and check the "Use different logo for sticky header" option. Checking this option will open up some more options for customizing the sticky header logo. These settings apply to the Sticky Header logo only and do not affect the default logo:

If a different logo is set, the logo will switch over when the header changes to sticky. See screen recording below as an example of how it works.

First, set a default logo from the Site Identity section in the Customizer. Refer to the How to upload a custom logo article for further instructions. Once you have set the default logo, navigate back to Header > Sticky Header and upload a different logo for the sticky header. The sticky logo size and spacing can be adjusted from the logo settings below the logo upload setting:

Individual Pages

The sticky header can be disabled on a per-page basis. To disable the sticky header on a specific page, navigate to the Edit Page screen for the page you wish to edit. There will be a Genesis Customizer settings in the bottom right of the screen. Check the "Disable sticky header" option and then click Publish: