hello i need help with colors on hero image label theme

Solved
tscc
Excursionist
37 0 6

hello my theme states that i can have the color over my header image be one color on the home page and then change to a different color one on another page I've looked at this code for days and cant see it or find it can anyone assist this is the message I see but don't know where to go to change "If hero image is enabled, you can override homepage color in the Header section" 

0 Likes
tony5280
Shopify Partner
61 6 18

please share a link

tscc
Excursionist
37 0 6

https://the-salami-chip-co.myshopify.com/

Password : TSCC

 

this is what i want it to do but I cant find in header to do so

Screen Shot 2020-10-17 at 7.06.40 AM.pngScreen Shot 2020-10-17 at 7.07.16 AM.png

0 Likes
tony5280
Shopify Partner
61 6 18

Hi, thanks, so when I check the site on mobile, it looks just like the screenshot you shared. What am I missing here?

tscc
Excursionist
37 0 6

the colors of the menu button and cart on the top I need them to be able to change colors from homepage(white) to another page(blue) I'm looking in the code on how to do this but I cant find it but it states you can change this in the header section of the code but I can seem to find it to be able to change it to white on homepage and then blue on all other pages

0 Likes
tscc
Excursionist
37 0 6

i have switch it to white and now you can see the problem on the other pages they blend into the white of the other pages and want them to change to blue on other pages like I have in photo examples

0 Likes
tscc
Excursionist
37 0 6

homepage whitehomepage whiteothers blueothers blue

tscc
Excursionist
37 0 6

sorry I wasn't most specific with issue 

 

0 Likes
tony5280
Shopify Partner
61 6 18

no problem! I understand now, and that should be and easy fix. one moment...

0 Likes
tony5280
Shopify Partner
61 6 18

So, looking at your site, I can tell you exactly how to do it with CSS.  I won't be able to tell you how to do it without editing code, unfortunately. 

On the body element of your homepage, they were kind enough to set a distinct class name: template-index
Screen Shot 2020-10-17 at 12.07.22 PM.png

 

So, you can explicitly target any element on the homepage, and constrain the scope of your changes to affect only descendants of an element with a class template-index.

/* if the theme has this...*/
.site-header__burger-menu div.icon-burger div.row {
    background-color: #a4dded; /* light blue */
}
/* then you could ovverride that only on the homepage by prepending the .template-index class */
.template-index .site-header__burger-menu div.icon-burger div.row {
    background-color: #ffffff; /* white */
}

To add that code, go to:  online store > themes > actions > edit code
You're looking for a file called theme.scss.liquid.