Black Friday! Get up to 25% off GP Premium! Learn more ➝

Reply To: Request: Sticky Animated Resizing Header On Scroll

Home Forums Support Request: Sticky Animated Resizing Header On Scroll Reply To: Request: Sticky Animated Resizing Header On Scroll

Home Forums Support Request: Sticky Animated Resizing Header On Scroll Reply To: Request: Sticky Animated Resizing Header On Scroll

#242543
Tom
Lead Developer
Lead Developer

Hi Simon,

Not easy, but do-able!

First, let’s set it up.

1. Hide your header:

.site-header {
    display: none;
}

2. Set your navigation to be sticky and select the “None” effect in “Customize > Layout > Primary Navigation”.

3. Add your logo to the navigation in the same section, and set the position to “Sticky + Static”.

4. Increase the height of your navigation in the same section.

Once you do that, let me know (and possibly link me to your site), and we can create the resizing animation 🙂