Add to cart button not working after change

[edydavies]

Hi, looking for some help 🙂 

I made a change to our website based on this tutorial which applied a transparent header, it worked nicely even though I'm using a lower version of Dawn (V2), I thought - https://websensepro.com/blog/how-to-make-sticky-and-transparent-header-in-dawn-theme/

A customer noticed that our add to cart button is now not working, which is isn't. It's not responding all, normally it would add a product to cart and a pop-up would appear. 

I've gone line by line on my header.liquid file to work out what is causing this. It's definitely something in that file which is broken. When I replace the file with an original version (without the transparent header change), it works as normal. 

I've even gone through line by line and replaced new code with old, trying to identify the area which is breaking. This didn't work. All I know is that it's something between line 200 and 600 and has nothing to do with the Syntax. 

I really like the transparent change so I don't want to revert that. It's working nicely everywhere else, so would prefer to fix the add to cart issue now. 

Could anybody help me? What part of the header.liquid file is triggering the add to cart? 

My site: https://summergray.com/

[Dan-From-Ryviu]

Did you make the change? Because I have checked and saw your add to cart button still working.

[edydavies]

I had to revert to an old version of the theme to allow the add to cart to work. 

Would it help if I attached the header.liquid file?

[Dan-From-Ryviu]

No, you don't. Please go to your Online store > Themes > Customize > Header > Sticky header > Always, click Save, then I can provide code to make your header transparent without affect to Add to cart button

[edydavies]

Hi, yep that's done! Many thanks! 

[Dan-From-Ryviu]

Go to your Online store > Themes > Edit code > open theme.liquid file, add this below code before </head> tag

{% if template == 'index' %}
<style>
#shopify-section-header .header-wrapper { background: transparent; }
#shopify-section-header .header-wrapper .header__icon .icon {
color: #fff;
}
@media (min-width: 768px) {
#shopify-section-header .header-wrapper .list-menu__item {
color: #fff;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .list-menu__item {
color: #181818;
}
}
#MainContent { margin-top: -90px; }
@media (max-width: 767px) {
#MainContent { margin-top: -67px !important; }
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper { background: #fff; }
#shopify-section-header.shopify-section-header-sticky .header__icon .icon { color: #181818; }

</style>
{% endif %}

[edydavies]

Thank you! This seems to work nicely. The only issue is that I need a different logo colour on the homepage (it needs to be white). Are you able to add that somewhere in this code? Many thanks

[Dan-From-Ryviu]

Give me white logo version please 

[edydavies]

 logo attached (it's PNG)

[Dan-From-Ryviu · Accepted solution]

Code updated

{% if template == 'index' %}
<style>
#shopify-section-header .header-wrapper .header__heading-link img { opacity: 0; }
#shopify-section-header .header-wrapper .header__heading-link { 
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/394111iF0BEC08C37A7BF4C/image-size/medium?v=v2&px=400'); 
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .header__heading-link img {
opacity: 1;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .header__heading-link {
background-image: unset;
}
#shopify-section-header .header-wrapper { background: transparent; }
#shopify-section-header .header-wrapper .header__icon .icon {
color: #fff;
}
@media (min-width: 768px) {
#shopify-section-header .header-wrapper .list-menu__item span {
color: #fff;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .list-menu__item {
color: #181818;
}
}
#MainContent { margin-top: -90px; }
@media (max-width: 767px) {
#MainContent { margin-top: -67px !important; }
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper { background: #fff; }
#shopify-section-header.shopify-section-header-sticky .header__icon .icon { color: #181818; }

</style>
{% endif %}