Zest Sticky header on Scroll DOWN as well as Up

Store Design
,

Topic summary

A user is seeking to modify the Zest theme’s sticky header to remain visible when scrolling both down and up, rather than only appearing on upward scroll.

Solutions Proposed:

  • CSS-only approach: Add position: sticky; top: 0; to .f-section-header via Custom CSS in theme settings, or use position: fixed !important; on the sticky header wrapper in header.css

  • JavaScript modification: Locate the theme’s JS file (theme.js, header.js, or zest.js) and modify the scroll event listener to add a visibility class regardless of scroll direction (both up and down). Pair this with CSS transitions using transform: translateY() for smooth appearance

Implementation Steps:

  1. Access theme code via Online Store > Themes > Edit Code
  2. Either add CSS directly or modify JavaScript scroll logic
  3. Test changes to ensure header remains visible during all scroll actions

The discussion remains open with no confirmation of which solution worked for the original poster.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Testing the zest theme and I’m wondering if anyone has found a way to make the sticky header option for not just scroll up but scroll down?

2

Hi @spacewithak

You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings and check if it work

html .f-section-header { position: sticky; top: 0; }
3

Hi @spacewithak ,

I am from Mageplaza - Shopify solution expert.

To make the sticky header in the Shopify Zest theme appear on scroll-down actions ,you’ll need to customize the JavaScript that controls the sticky header behavior. Here’s how you can achieve this:

  1. Locate the Theme’s JavaScript File

    • Go to Online Store > Themes > Actions > Edit Code.
    • Look for the JavaScript file controlling the header. Common file names include:
      • theme.js
      • header.js
      • zest.js (specific to the Zest theme)

  2. Understand the Current Behavior

    • The sticky header likely uses a script to detect scroll direction and shows/hides the header based on scroll-up events.
    • Search for a section where scroll events are being tracked. Look for keywords like scroll, addClass, removeClass, or similar.

  3. Modify the Scroll Logic

    • Add logic to make the header sticky when scrolling both up and down:
let lastScroll = 0;
const header = document.querySelector('.sticky-header'); // Replace with the actual header class

window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;

    if (currentScroll > lastScroll) {
        // Scrolling down
        header.classList.add('header-visible');
    } else {
        // Scrolling up
        header.classList.add('header-visible');
    }

    lastScroll = currentScroll;
});
​​
  • Adjust CSS for Visibility:
.sticky-header {
    transition: transform 0.3s ease;
    transform: translateY(-100%);
}
.sticky-header.header-visible {
    transform: translateY(0);
}
​
  1. T****est the Changes
  • Save your changes and test the header behavior on your site.
  • Ensure the sticky header works seamlessly on scroll up and down.

I hope this information proves helpful to you. Feel free to leave a comment if you require any additional assistance or further clarification!

4

Hi @spacewithak

Go to Online Store > Themes > Actions > Edit Code > header.css
Add below code in header.css file

sticky-header.site-header__wrapper {
    position: fixed !important;
    top: 0 !important;
    z-index: 9999;
    width: 100%;
}