Transparent Header Dawn Theme Fix

[Astyr0]

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' %}
<style>
.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; }
}
</style>
{% 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

[WaitWhatWeb · Accepted solution]

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

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

[Astyr0]

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

[WaitWhatWeb]

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

.header__heading-link {
    padding: 0;
}

make the header smaller

[WaitWhatWeb]

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

change the 'red' with any color you prefer

[Astyr0]

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

[WaitWhatWeb]

.header__icon {
    color: red;
}

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

try this

[topnewyork]

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 </head>

<style>
.section-header .header-wrapper {
    margin-top: -19px !important;
}
.banner__media.media.animate--zoom-in.scroll-trigger.animate--fade-in {
    margin-top: -83px !important;
}
</style>

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