Hello,
This community has been extremely helpful so I thank you but I can’t seem to figure out how to remove the gap between the header and announcement bar when scrolling down. The announcement bar disappears but the gap is still there. I would love it to be as you scroll the announcement bar and header starts sliding upwards but stops when the header meets the top. Thanks for the help
This may take some custom coding, possible javascript. Could you please share your store URL, password if necessary and the theme/theme version?
Add Custom CSS:
To achieve the desired effect of having the announcement bar and header slide upwards but stop when the header meets the top, you’ll need to add custom CSS. Here’s a basic example:
/* Adjust the announcement bar and header positioning when scrolling */
#announcement-bar-id {
position: fixed; /* Fixes the announcement bar at the top */
top: 0; /* Ensures it’s at the top */
width: 100%; /* Makes it full-width */
z-index: 999; /* Adjust the z-index to ensure it’s on top */
}
/* Adjust the header positioning when scrolling */
#header-id {
position: fixed; /* Fixes the header */
top: announcement-bar-height; /* Replace ‘announcement-bar-height’ with the actual height of your announcement bar */
width: 100%; /* Makes it full-width */
z-index: 998; /* Adjust the z-index to ensure it’s below the announcement bar */
}
Would this be placed in theme.liquid or base.css? Thanks
https://6ff2bf-3.myshopify.com/
theme is refresh
First, please be sure that you have selected ‘always’ sticky for the header section in the Editor. I don’t see the correct classes being add when I scroll which indicates the header has either been customized or that option is simply not checked off. This could solve this issue.
IF it’s been customized, you can revert the header file to it’s original by going to Online Store > Themes > “…” > Edit Code. Open the header.liquid file under the Sections folder. At the top under “Recent Changes” click the drop down and then scroll to Original and hit save. Again, please check off ‘sticky always’ for the header section in the Editor as well.
If you can’t revert OR have not customized the code AND the option for ‘always’ sticky IS checked off and it’s STILL NOT working, you’ll have to make 2 changes.
{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.header = document.querySelector('.section-header');
this.headerIsAlwaysSticky = this.getAttribute('data-sticky-type') === 'always' || this.getAttribute('data-sticky-type') === 'reduce-logo-size';
this.headerBounds = {};
this.setHeaderHeight();
window.matchMedia('(max-width: 990px)').addEventListener('change', this.setHeaderHeight.bind(this));
if (this.headerIsAlwaysSticky) {
this.header.classList.add('shopify-section-header-sticky');
};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector('predictive-search');
this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;
this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.addEventListener('scroll', this.onScrollHandler, false);
this.createObserver();
}
setHeaderHeight() {
document.documentElement.style.setProperty('--header-height', `${this.header.offsetHeight}px`);
}
disconnectedCallback() {
this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.removeEventListener('scroll', this.onScrollHandler);
}
createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});
observer.observe(this.header);
}
onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
this.header.classList.add('scrolled-past-header', 'sticky-on-scroll');
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
this.header.classList.add('scrolled-past-header', 'sticky-on-scroll');
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);
this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);
requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
this.header.classList.remove('scrolled-past-header', 'sticky-on-scroll');
requestAnimationFrame(this.reset.bind(this));
}
this.currentScrollTop = scrollTop;
}
hide() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky', 'sticky-on-scroll');
this.closeMenuDisclosure();
this.closeSearchModal();
}
reveal() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.add('shopify-section-header-sticky', 'animate', 'sticky-on-scroll');
this.header.classList.remove('shopify-section-header-hidden');
}
reset() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate', 'sticky-on-scroll');
}
closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');
this.disclosures.forEach(disclosure => disclosure.close());
}
closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector('details-modal');
this.searchModal.close(false);
}
}
customElements.define('sticky-header', StickyHeader);
{% endjavascript %}
You’ll then go to the base.css file and all the way at the bottom make a few new line breaks and add:
.sticky-on-scroll {
position: sticky;
top: 0;
z-index: 4;
}
Please let me know how far this gets you and we can go from there.
Wow thank you for the response. Will try these today and get back to you!
Great! I hope it works with just checking off the option :P.
I wanted to be sure I provide all the information for each case. If you’d like to discuss this more, don’t hesitate to send me a PM.