Only Allow Transparent Banner Functionality on Desktop - Dawn Theme

Store Design
, ,

Topic summary

A user needed to restrict transparent banner functionality to desktop only on their Dawn theme Shopify store, as the transparent background was briefly appearing (1-2 seconds) during upward scrolling on mobile devices.

Problem:

  • Transparent banner showing momentarily on mobile during scroll
  • Existing code implementation wasn’t fully preventing mobile display

Solution Provided:
A CSS media query targeting mobile devices (max-width: 767px) was suggested to force a solid background color on the sticky header wrapper, effectively disabling transparency on smaller screens.

Outcome:
The proposed CSS fix successfully resolved the issue, allowing the transparent banner to function exclusively on desktop while maintaining a standard header appearance on mobile devices.

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

Hi Everyone,

I’m encountering a new challenge with my website’s banner functionality. I’ve been working on implementing a transparent banner, which I want to work exclusively on desktop view. The goal is to have this feature completely disabled on mobile devices.

As of now, I’ve managed a temporary fix. However, there’s still a minor issue where, for a brief 1-2 seconds during upward scrolling, the transparent background becomes visible on mobile. This isn’t ideal, and I’m seeking a more effective solution.

Could anyone suggest a method to fully disable the transparent banner on mobile devices, ensuring that it functions seamlessly only on desktop views? Your expertise and suggestions would be invaluable in achieving this optimal display compatibility.

The code I am using for the transparent banner is below:

Header.liquid:

section-image-banner.css:

@media screen and (min-width: 750px) {
#Banner-template–15084817678423__image_banner {
margin-top: -120px !important;
}

Website: Aromidy.com

Password: Aromidy2023

Thanks in advance for your assistance and insights!

Best regards,

Kai

2

Add the below code to your theme’s CSS file.

@media screen and (max-width: 767px) {
#shopify-section-sections--15084818169943__header sticky-header.header-wrapper {
    background: #fff !important;
}
}
1 Like
3

Worked Great!

Thanks Kabir :smiley: