Dawn Theme Blog Header Broken

Store Design
,
1

I am trying to start using a blog for my website which has been running seamslessly for a few years. The Default blog page is creating a very strange behavior where on scroll the header background fades in and fills down to the blog title. I have isolated the issue to the blog title by hiding it in the theme editor at which point the behavior goes away. My header setting is set to sticky and changing it does not fix the issue. Here is a link that should go to the preview of the page : Link

I do have some custom CSS for my header but from what I see it should not be touching these classes at all.

.footer-block__image-wrapper {
border-radius: 20px;
}
.footer-block__brand-info {
padding-right: 60px;
}
header:before {
opacity: 10;
background-image: url(“https://cdn.shopify.com/s/files/1/0624/4509/3091/files/210D_wide_61d99bed-dc05-4c5c-9356-6ec71c3c7bde.svg?v=1697557881”);
background-repeat: repeat;
background-origin: content-box;
background-size: 50%;
}
a.header__heading-link.link.link–text.focus-inset {
z-index: 999;
}

2

Hey @bullmoosesg

The opacity property takes a value between 0 and 1, so opacity: 10 is the same as opacity: 1, meaning your background SVG texture is fully visible on the pseudo-element at all times and interfering with Dawn’s scroll-based header transparency logic.

Try scoping thatheader:before rule so it doesn’t apply on the blog template, or just drop the opacity down to something like 0.15 which is probably what you originally intended anyway:

header:before {  
   opacity: 0.15;  
   background-image: url("https://cdn.shopify.com/s/files/1/0624/4509/3091/files/210D_wide_61d99bed-dc05-4c5c-9356-6ec71c3c7bde.svg?v=1697557881%E2%80%9D");  
   background-repeat: repeat;  
   background-origin: content-box;  
   background-size: 50%;
}

If you want it completely excluded from the blog page you can add a body class condition in your theme CSS or wrap it in a {% unless template == ‘blog’ %} block inside your theme’s stylesheet include.

Check whether fixing the opacity alone resolves the scroll behavior first since that’s the most likely culprit here. Let me know what you find.

Cheers,
Moeed

3

Hi @bullmoosesg

Try this code.

header:before {
opacity: 1;
background-image: url("https://cdn.shopify.com/s/files/1/0624/4509/3091/files/210D_wide_61d99bed-dc05-4c5c-9356-6ec71c3c7bde.svg?v=1697557881");
background-repeat: repeat;
background-origin: content-box;
background-size: 50%;
pointer-events: none;
}
4

Thank you both for your responses. I ended up just changing the liquid to remove the header tag from the article child and making it a Div isntead. I am going to try these fixes at a later date!

5

@bullmoosesg

The issue is caused by your custom CSS in the Dawn on Shopify, especially:

header:before {
  opacity: 10;
}

Problem: opacity must be 0–1, not 10. This breaks the sticky header transition and makes the background appear to expand down to the blog title.

Fix:

header:before {
  opacity: 1;
}

Or remove the header:before rule entirely. This should stop the scrolling background effect.