Custom Header Wont Show On Mobile (Frustrating)

Shopify Discussion

Topic summary

A user is experiencing issues displaying a custom header with a “gooey effect” on mobile devices while using Shopify’s Dawn Theme 12.0.0. The desktop version works correctly, but attempts to apply CSS code from other forum posts haven’t resolved the mobile display problem.

Technical Details:

  • Custom CSS has been added for desktop (min-width: 995px)
  • Background images are referenced via Shopify CDN URLs
  • The code includes both header and footer styling with background-size and no-repeat properties

Current Status:

  • The issue remains unresolved
  • Another user has requested the store URL and password (if unpublished) to provide assistance
  • The original poster describes this as their “last step” before completion
Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

I’ve Tried looking for different peoples codes and they dont work I need help because this is the last step I want to do but its just not being nice to me. Would love that gooey effect I have on desktop to mobile any help would be amazing I am Using Updated Dawn Theme 12.0.0 I’ve already added the custom code, But Theses Other ones on other post dont work for what I want.

@media screen and (min-width: 995px) {
header. header {
background: url(https://cdn.shopify.com/s/files/1/0817/8185/0393/files/Untitled-3_copy.png?v=1699857743) no-repeat;
background-size: 100%;
}
footer. footer {
background: url(https://cdn.shopify.com/s/files/1/0817/8185/0393/files/WDWQ_dac066cf-2d50-4afa-81fc-396428fc868d.jpg?v=1699837658) no-repeat;
background-size: 100%;.

First picture is desktop second is mobile

2r3r.jpg
2r3r.jpg1314×763 105 KB

fdqef.jpg
fdqef.jpg450×911 44.8 KB

1 Like
2

Hi @DrMonster216

Would you mind to share your Store URL website? with password if its unpublish. Thanks!