Sticky announcement & header that changes to solid when scrolling Dawn theme

lamornay2019
New Member
4 0 0

This code so far works for to make the announcement sticky: 

 

 

.announcement-bar-section {
  position: sticky;
  top: 0;
}

 

 

This code works for making transparent header which turns to solid colour on scroll:

 

 

<script>
  document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('scroll', function() {
      if (window.scrollY > 100) {
        document.querySelector('header').classList.add('solid');
      } else {
        document.querySelector('header').classList.remove('solid');
      }
    });
  });
</script>
header {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background-color 0.3s ease-in-out;
}

header.solid {
  background-color: #f9f6f3;
}

 

 
The problem is it's partially covered by the announcement & fully covered by it on mobile view. It looks like the header is sitting behind it. How can I adjust the header to sit underneath the announcement as it should? Also, when I go to fullscreen view, the header isn't full width it only expands to the page width.

Reply 1 (1)

StephensWorld
Shopify Expert
1202 131 300

I don't have a direct coding-related answer for you, but one potential workaround would be to disable the announcement bar within your theme, and then use the free version of the "Hextom: Quick Announcement Bar" app.

 

https://apps.shopify.com/quick-announcement-bar-always-keep-your-customers-informed

 

The way the app works is that it shows the bar above the header (rather than being a part of it), so it may solve your issue with the announcement overlapping your header. 

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca