Transparent Header Dawn Theme Fix

Store Design
, , , ,
1

Hello so I am currently working on my website and I decided to add a transparent header so that my image banner could display with minimal distractions while still having it show up when scrolling up from the bottom of the website, I pasted this code:

{% if template == ‘index’ %}

.section-header .header-wrapper { background: transparent; transition: background .25s ease-in-out; } #MainContent { margin-top: -90px; } html .section-header.scrolled-past-header .header-wrapper { background: #fff; } @media (max-width: 749px) { html #MainContent { margin-top: -73px; } }

{% endif %}

In theme.liquid however after I made a few changes, (i have forgotten what it was) and now it no longer works. Please help me find a solution, Thank you.

My url is: norse-wellness.myshopify.com

and the password to enter is: Nordwyn

2 
#MainContent {
    margin-top: -200px;
}

your header is transparent already, you can change the margin-top value

3

Hi @Astyr0

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!

4

Thanks it works. Is there any way to make the header size a bit smaller when the user scrolls up on the website. I also want to change the menu text color when its transparent but have it be a different color when the header is in full view (while the user scrolls up)

Thanks for your help

5 
.header {
        padding-top: 0px;
        padding-bottom: 0px;
    }

.header__heading-link {
    padding: 0;
}

make the header smaller

6 
html .section-header.scrolled-past-header .header-wrapper a {
    color: red !important;
}

change the ‘red’ with any color you prefer

7

Thank you it all works! however the home and search button stay unaffected

Screenshot 2025-01-10 065737.png
Screenshot 2025-01-10 065737.png1412×106 17 KB

8 
.header__icon {
    color: red;
}

.header__active-menu-item {
    color: red;
}

try this