Solved

Transparent Header on Homepage - Craft Theme

mokon
New Member
8 0 0

Hi there! I am trying to make the header transparent on my site's homepage so that the slideshow will show up behind it. This is what it currently looks like:

Screenshot 2024-02-07 at 4.40.40 PM.png

 

I want it to look like this:

Screenshot 2024-02-07 at 4.48.12 PM.png

 

Preview link: https://ufhmvqozdzndhthe-3644853.shopifypreview.com

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1059 275 214

This is an accepted solution.

Hey @mokon,

 

I wasn't aware of all the requirements. 

 

Delete the previous code and replace with this
This one goes below the <head> tag

{%- if template.name == 'index' -%}
<style>
sticky-header {
    background: transparent !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
}

sticky-header:has(details.menu-opening),
sticky-header.active {
    background: white !important;
}

@media only screen and (max-width: 989px) {
    main#MainContent {
        margin-top: 0 !important;
    }    
}
</style>
{%- endif -%}

 

 

And add this new code to  the bottom of the file above the </body> tag

<script>
window.addEventListener('scroll', function () {
  var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollPosition > 500) {
    document.querySelector('sticky-header').classList.add('active');
  } else {
    document.querySelector('sticky-header').classList.remove('active');
  }
});
</script>

 

Screenshot for reference

ThePrimeWeb_0-1707447062737.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
1059 275 214

Hey @mokon,

 

Follow these instructions 😊

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
sticky-header {
    background: transparent !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
}

sticky-header:has(details.menu-opening) {
    background: white !important;
}

@media only screen and (max-width: 989px) {
    main#MainContent {
        margin-top: 0 !important;
    }    
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707343973405.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
mokon
New Member
8 0 0

That worked to make the header transparent, but it's transparent across the whole site now and I want it only on the homepage. It looks like this on the product pages which isn't ideal:

Screenshot 2024-02-08 at 1.18.08 PM.png

 

Also, upon scrolling on the homepage the header should turn white and be sticky - like this: https://drive.google.com/file/d/1Vsb4dL6TteNz6oxAK__jbhNGE9ygEwdH/view?usp=sharing

 

THANK YOU for your help!

ThePrimeWeb
Shopify Partner
1059 275 214

This is an accepted solution.

Hey @mokon,

 

I wasn't aware of all the requirements. 

 

Delete the previous code and replace with this
This one goes below the <head> tag

{%- if template.name == 'index' -%}
<style>
sticky-header {
    background: transparent !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
}

sticky-header:has(details.menu-opening),
sticky-header.active {
    background: white !important;
}

@media only screen and (max-width: 989px) {
    main#MainContent {
        margin-top: 0 !important;
    }    
}
</style>
{%- endif -%}

 

 

And add this new code to  the bottom of the file above the </body> tag

<script>
window.addEventListener('scroll', function () {
  var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollPosition > 500) {
    document.querySelector('sticky-header').classList.add('active');
  } else {
    document.querySelector('sticky-header').classList.remove('active');
  }
});
</script>

 

Screenshot for reference

ThePrimeWeb_0-1707447062737.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
mokon
New Member
8 0 0

Thank you SO much - this worked!!!