How to make the header transparent - Dawn theme

Store Design
, , , , , , , ,
1

I’m using dawn theme in that I want to customize the header as transparent in home page completely on scroll also it should be transparent. I’ll attach the reference website like how I want to make it

Reference website: offnorth.com

My website: https://2512in.myshopify.com/

Password: 2512

Thanks in advance

2

Hi @Sivadarshan
To make herder transparent, use code below

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open it instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
.header-wrapper--border-bottom {
    border-bottom: unset !important;
}

.scrolled-past-header .header-wrapper{
    background: unset !important;
}

.scrolled-past-header .list-menu__item {
    color: #fff !important;
}
3

Hi @Sivadarshan ,

I hope this message finds you well.

Yes, as per your requirement, you can achieve a fully transparent header on the homepage, even on scroll, using custom CSS. You can add the following CSS to your theme:

.shopify-section-header-sticky sticky-header.header-wrapper {
background: transparent !important;!i;!;
}

You can add this CSS to your theme’s base.css file or inside Online Store > Themes > Customize > Theme settings > Custom CSS.

Let me know if you need further adjustments, and the community will be happy to help! :blush:

Regards,

4

Hi @Sivadarshan

If the solution presented meets your needs and effectively addresses your query, I encourage you to accept it as the chosen answer. This will acknowledge your support and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

5

@Dotsquares Thanks for the code, How to make the menu items white.

6

@Sivadarshan , In the menu item block, add text-Color: White (hexa code). it will turn all items to white.