Dawn theme mobile and desktop header blur customization

Store Design
, , , , , , , , , , , , ,

Topic summary

A user seeks to customize the Dawn theme header to achieve a transparent-to-blurred effect on scroll, matching a reference website (prashasya.com). The desired behavior includes:

Requirements:

  • Desktop header: transparent initially, blurred on scroll
  • Mobile header: transparent initially, blurred on scroll (similar to desktop)

Current Status:

  • Desktop header already transparent
  • Mobile customization incomplete

Solution Progress:
A helper provided CSS code to achieve the effect, targeting the header wrapper with backdrop filters and scroll-based styling. The code includes:

  • Removal of default backdrop filter
  • Scroll-triggered background changes
  • Mobile-specific positioning and transparency
  • Color adjustments for header elements

Implementation Issue:
The user encountered a 500-character limit when adding the CSS to the theme’s Custom CSS section. The recommended workaround is to add the code directly to the assets/base.css file via the theme code editor instead.

The discussion remains ongoing as the mobile implementation is being finalized.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I’m using the Dawn theme, and I need to customize the header for both mobile and desktop views. I want the header to be transparent initially, and when scrolling begins, it should become blurred. I’ll attach a reference website—please take only the header part as a reference, as I want the same effect applied to my header. I’ve already made the desktop header transparent.

Customizations needed:

  1. Make the desktop header blurred only on scroll.

  2. Make the mobile header transparent.

  3. Like the desktop view, make the mobile header blurred on scroll.

My website: https://weavers-town.myshopify.com/
Password: weaver

Reference website: https://prashasya.com

Thanks in advance

2

Hi @Sivadarshan

let try to add custom css below:

#shopify-section-sections--17089960476739__header .header-wrapper {
  backdrop-filter: none;
}

The result:

initial page:

BiDealDiscount_0-1746634638597.png
BiDealDiscount_0-1746634638597.png1297×398 604 KB

scroll page:

BiDealDiscount_1-1746634653468.png
BiDealDiscount_1-1746634653468.png1304×884 216 KB

3

@BiDeal-Discount , Sorry I want the blur exact like the reference website attached. please have a look onto it. exact on both mobile and desktop view

4

this seem ok on desktop & haven’t ok on mobile yet @Sivadarshan ?

1 Like
5

Hi @Sivadarshan

let try to add this custom css:

.section-header.scrolled-past-header .header-wrapper {
    background-color: #fffc !important;
}
@media only screen and (max-width: 989px) {
    .header-wrapper {
        background: transparent !important;
        position: absolute !important;
        width: 100% !important;
        top: 0px;
    }
}
.header__icon.link, .header__active-menu-item, .disclosure__button, .header__heading-link .h2 {
    color: white !important;
}
.scrolled-past-header .header__icon.link, .header__active-menu-item, .disclosure__button, .header__heading-link .h2 {
    color: rgba(var(--color-foreground), .75) !important;
}
6

@BiDeal-Discount But when I try to add in custom CSS it shows 500 character limit reached

7

oh maybe your Custom CSS have too much code. Let try to add to assets/base.css in edit code