Shopify themes, liquid, logos, and UX
Hi! Please help me to find a solution. I basically don't know anything about coding, but i managed to add a background color transition for the header on scroll and on hover from transparent to black and all this works great. But i can't make the header color change from transparent to black when i hover on announcement bar, i assume it conflicts with something in my code. It's really annoying because when i open a mega menu everything looks fine and both header and menu are black, but if i move my mouse to announcement bar then header becomes transparent while menu is still black. Any idea how i could make it work?
Here is my code for changes i made, it's inside Head at ThemeLiquid:
{% if template == 'index' %} <style> .header { position: fixed; width: 100%; top: 40px; transition: background-color 0.3s ease; left: 0; right: 0; margin: 0; max-width: 100%; } .header.transparent { background-color: transparent; } .header.black { background-color: #000; top:0; } .header:hover { background-color: black; } </style> <script> document.addEventListener('DOMContentLoaded', function() { var header = document.querySelector('.header'); header.classList.add('transparent'); }); // Change header background on scroll window.addEventListener('scroll', function() { var header = document.querySelector('.header'); var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > 0) { header.classList.remove('transparent'); header.classList.add('black'); } else { header.classList.remove('black'); header.classList.add('transparent'); } }); </script> {% endif %}
Thank you.
Hey @KatherineX
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
I'm working with the code in the unpublished theme which currently is a draft, it's not applied to my shop yet.
You should be able to share a preview link then.
But even seeing the unmodified theme may help.
Generally, You should modify your code to something like (just a guess here):
.header.black,
.header:has(.menu[open]) { // keep header black bg when menu open -- nor real selector
background-color: #000;
top:0;
}
But it's hard to suggest without seeing how your theme works.
Thank you! I haven't realized i can do that! Here is my preview link https://plrzyj5pbnnucxvu-66666463498.shopifypreview.com
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024