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

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:



  document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('scroll', function() {
      if (window.scrollY > 100) {
      } else {
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)

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.


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. ★