Fixing Transparent Header Issue on Your Website Theme

·

Hey - Cannot work out why the header from my website theme is appearing as transparent on my actual website. The replo editor is just showing it as normal

5 comments

Pylon
APP
·
·
Hi Matt! It appears there may be a theme collision. Could you share the preview link for that page so we can investigate further?
Matt
·
·
Hey Ahmed - https://www.thislittlenow.com/apps/alchemy/element/preview?elementId=4e951515-dd04-441b[…]-fc0c2a1788f8&storeId=76c2b5c4-56ad-4d9d-bf9b-2a7c46c35c1d
Matt
·
·
but if you go on the actual website www.thislittlenow.com it is different. There's a few elements that are appearing differently to the replo view. Add to cart is also not working
Pylon
APP
·
·
After reviewing the issue, It appears that the theme treats the header on the homepage differently by making it transparent and positioned absolute which causes this issue. To fix this theme collision issue, You will need to do the following: 1- drag and drop the Custom Code component on the page (you can add it anywhere on the page) 2- Go to Config > launch code editor 3- paste the following code and save:
<style> .header[transparent] { position: static !important; } .header-logo[data-hidden-on-home-page] { display: flex !important; } </style>
4- publish the page to make the changes live and check the homepage!
Pylon
APP
·
·
Can you share more details about the elements that are appearing differently compared to the dashboard? As for the add to cart, It looks like the product is out of stock. "The product 'Baby Zip-Up - Bean Green / 0-3 M' is already sold out." That's why it can't be added to the cart. You can add an out of stock state to the add to cart button, you can check this doc