Freezing the full header when scrolling

Ask & Offer
1

Hi,

i am trying to freeze the whole banner when scrolling. only part of it freezes when scrolling down.

www.zenfeet.com.au

Can someone please assist.

Thank you.

1 Like
2

The reason only part of your banner freezes is that the sticky/fixed style is applied just to one section (like the nav), not the whole header. Try wrapping your full header in a parent container and add:

.header-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
}

This will keep the entire banner in place when scrolling. If you prefer fixed, just remember to add padding to the top of your page content so it doesn’t overlap.

3

Hi @maan2

Has this issue been resolved for you?

4

Hi @maan2!

That happens because Shopify themes (including Horizon, Dawn, etc.) often use background images set with

background-attachment: fixed;

or partial sections wrapped in containers. So only the background (or one layer) is fixed, not the entire banner block.

How to Fix (Freeze the Entire Banner)

You’ll need to apply CSS to the whole banner section, not just its background.

Go to Online Store → Themes → Edit Code → Assets → base.css (or theme.css) and add this:

/* Make entire hero/banner section fixed */

.section-banner,

.hero-banner,

.banner {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: -1; /\* stays behind content \*/

}

/* Add spacing so content below isn’t hidden behind fixed banner */

.main-content {

margin-top: 100vh; /\* same height as your banner \*/

}

Note:

.section-banner, .hero-banner, .banner — you’ll need to check your exact Horizon theme class name for the banner. (Right-click → Inspect → look for the wrapping your hero banner). Replace with that class if needed.

margin-top: 100vh; makes sure your page content starts below the fixed banner, not overlapping. Adjust the value depending on your banner height.

If you only want a parallax effect (background frozen, content scrolls), keep background-attachment: fixed; instead of fixing the whole section.

Hopefully, this will fix the issue for you.

Warm Regards,

EmbedAny Support