Spark Theme: White on White Header Outside of Homepage Issue

Technical Q&A
1

Running the Spark theme on Shopify:

I setup the header to be completely transparent on the home page but that effect doesn’t carry across any other pages.

Tried inserting:

@media only screen and (min-width: 750px) {
.template-index .site-header {
position: absolute;
    width: 100%;
background-color: transparent;
}
.template-index .site-header__mobile-nav {
background-color: transparent;
}
}

into the end of the Theme.css and Theme.liquid codes but nothing’s being affected across any page.

Anyone have a quick solution? For having created quite a lot of websites, this seems like a very simple issue to remedy yet I’ve had no luck so far.

https://kwameadusei.myshopify.com/

Thank you

2

Hi there.

.template-index in your css will target the homepage only. Try replacing it with body.

I do hope this helps you with this particular issue.

If you found this answer helped with your question, kindly mark it as a solution.

Kind regards.
Cole.

Blend Commerce.

BlendCole_1-1633547523326.png

3

@KwameAdusei , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
header[data-section-id="header"].is-sticky *{
    color: #000 !important;
}

header[data-section-id="header"].is-sticky .header__cart-count{
    border: 1px solid #000 !important;
}

You can change the #000 to any color you wish.

Kind regards,
Diego

4

Thank you

5

Appreciate the help

6

I tried using both suggested code snippets from KwameAdusei and Diego_ezfy and neither work for me. I too am looking for a way to keep the Spark theme’s header background transparent whilst scrolling and if possible to carry over to other pages on the site.

DM’d you too @KwameAdusei :+1: