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