Hi,
I am currently using a theme that does not have the transparent header on the mobile for the homepage. I added some CSS code that seems to do the trick but there is just a few things that stay white when I scroll down: the menu icon and the cart icon.
The website is : sagashopbyg.com and here are the screenshots : https://ibb.co/kh3vbkm
https://ibb.co/kB24nHj
And here is the code I added in the file theme.liquid directly
{% style %}
{% if template.name == “index” %}
@media screen and (max-width: 768px){
.page-container.page-element {
margin-top: -70px !important;
}
.logo-center-navigation-drawer .size-header-normal .section-sections–23876327080267__header .site-header .page-element .is-moved-by-drawer
.header-sticky .site-header–sticky .site-header–transparent .site-header-white .site-header–full .index-header{
background-color: transparent !important;
color:white !important;
}
div.shopify-section-group-header-group.section-header header.site-header, div.shopify-section-group-header-group.section-header header.site-header.active a.site-header__logo-link > img:nth-child(1){
background-color:transparent !important;
color:white !important;
}
.header-bottom .py-2 .py-lg-0{
background: transparent !important;
color: white !important;
}
#shopify-section-sections–23876327080267__header > header > div > div > div > div > div > div.d-flex.toggle-menu-mobile.align-items-center > button > svg{
color:white !important;
}
#shopify-section-sections–23876327080267__header > header > div > div > div > div > div > div.header-bottom__right.col-bottom__right > span > span > svg{
color: white !important;
}
a.site-header__logo-link > img:nth-child(1) {
display: none !important;
}
a.site-header__logo-link > img:nth-child(2) {
display: block !important;
}
div.shopify-section-group-header-group.section-header header.site-header.active {
background: white !important;
color: black !important;
}
.header-sticky .site-header–sticky .site-header–transparent .site-header-white .site-header–full .index-header .active .text-link .site-header__link .js-drawer-open-left .align-items-center .d-inline-flex > div > div > div > div > div > div.d-flex.toggle-menu-mobile.align-items-center > button > svg{
color: black !important;
}
/*div.shopify-section-group-header-group.section-header header.site-header.active, div.shopify-section-group-header-group.section-header header.site-header.active * {
background: white !important;
color: black !important;
}
*/
.overlaycart{
background-color: transparent !important;
}
div.shopify-section-group-header-group.section-header header.site-header, div.shopify-section-group-header-group.section-header header.site-header.active a.site-header__logo-link > img:nth-child(1) {
display: block !important;
}
div.shopify-section-group-header-group.section-header header.site-header.active a.site-header__logo-link > img:nth-child(2) {
display: none !important;
}
}
{% endif %}
{% endstyle %}
Any idea how to address this problem ?
Thank you