PLEASE HELP! Hover effect issue with announcement bar and header.

PLEASE HELP! Hover effect issue with announcement bar and header.

KatherineX
New Member
4 0 0

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.

Replies 5 (5)

Moeed
Shopify Partner
5877 1594 1897

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

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


KatherineX
New Member
4 0 0

I'm working with the code in the unpublished theme which currently is a draft, it's not applied to my shop yet.

tim
Shopify Partner
3874 380 1413

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.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
KatherineX
New Member
4 0 0

Thank you! I haven't realized i can do that! Here is my preview link https://plrzyj5pbnnucxvu-66666463498.shopifypreview.com

KatherineX
New Member
4 0 0