One of the standout features in GenerateBlocks is the ability to create a sticky header with just a few clicks — no custom code needed. You can control when the header becomes sticky, what devices it applies to, and even style it differently once it sticks.
In this post, I’ll walk you through the sticky header settings in the GenerateBlocks header block, show you how each option behaves, and how you can customize it to fit your site’s design.
Step 1: Where to Find Sticky Header Settings
If you’re using the Header block from GenerateBlocks (not your theme’s header), setting up a sticky header starts by editing that Header block.
Head into your WordPress dashboard, open up Appearance > Elements, and edit your Site Header element. Once selected, look for the Sticky Header option in the settings panel.
Step 2: Understanding the Sticky Options
There are three sticky behavior modes to choose from:
Always Sticky
As soon as the user scrolls down, the header sticks to the top — no matter what.
When Scrolling Up
The header only appears when users start scrolling back up the page. This is great for long-form content or pages where you don’t want the header visible all the time.
Past a Threshold
You can define a specific scroll distance (in pixels) before the header becomes sticky. For example, setting it to 100px means the header won’t appear until users scroll that distance.
Tip: Using a threshold of around 100px usually works well — enough to hide the header initially, but bring it back before users feel lost.
Step 3: Set Sticky Behavior by Device
GenerateBlocks lets you control sticky behavior by device type. You can choose:
- All Devices (default)
- Desktop Only
- Mobile Only
- Tablet and Up
This is especially helpful if you want the sticky experience to behave differently depending on screen size.
Step 4: Styling the Sticky vs. Not Sticky States
Here’s where GenerateBlocks really shines: You can apply different styles based on whether the header is sticky or not.
When you enable sticky headers, GenerateBlocks automatically gives you two state-based selectors in the Block Styles panel:
- Sticky
- Not Sticky
Example: Adding a Background on Sticky
Let’s say your header is transparent when the page loads, but you want a solid background when it becomes sticky. Here’s how to do that:
- Leave the default background blank
- Under the Sticky selector, set a background color (e.g., light blue)
- Save and preview your page
Now, the background color will only show once the header becomes sticky — keeping your hero layout clean on page load.
Step 5: Add a Drop Shadow or Change Padding on Scroll
To make your sticky header stand out even more, you can add:
- Box shadow (found under Effects > Box Shadow in the Sticky selector)
- Reduced padding to shrink the header when scrolling
This subtle shift in size can create a nice polished effect. For example, you might reduce top and bottom padding from 1rem.
