"Be Yours" Theme - How to Make Sticky Header

Store Design
, , ,
1

Can someone help with instructions on how to make the Announcement Header on the “Be Yours” (Version 6.9.1) theme Sticky

2

Hi @Pat-F

I don’t have access to Be Yours theme. If you can share the website link maybe I can provide the solution.

Thanks

Sheesh B

3

Thank you! I just sent you the link via messages.

4

HI @Pat-F

So, I found the solution. Check here: https://salesrw.myshopify.com/

Also, before performing the solution copy all the code available on header.liquid to a file.

First find header.liquid under sections and then open header.liquid and paste the shown code at the top of the file.

Sheesh_b_0-1694547982488.png
Sheesh_b_0-1694547982488.png400×208 33.1 KB

Code:

{% stylesheet %}

  .shopify-section-announcement-bar.shopify-section-header-sticky {
	position: fixed !important;
  width: 100%;
  z-index: 101;
  top: 0;
}
.shopify-section-header.shopify-section-header-sticky {
	position: fixed !important;
	width: 100%;
  top: 36px;
}
{% endstylesheet %}

Then, look for hide() { at line number 677 or whatever you have near to this.

Sheesh_b_1-1694547982479.png
Sheesh_b_1-1694547982479.png399×180 27.7 KB

Now, see the arrow and when you hover on it, it’ll show fold line and we just need to fold the lines upto bottom where you can find {% endjavascript %}… Now, remove that code up to {% endjavascript %}

Sheesh_b_2-1694547982543.png
Sheesh_b_2-1694547982543.png400×172 22.4 KB

Now, paste the below code

    hide() {
      this.header.classList.add('shopify-section-header-sticky', 'shopify-section-header-sticky');
      document.body.classList.add('shopify-body-section-header-sticky', 'shopify-body-section-header-sticky');
    }

    reveal() {
      this.header.classList.add('shopify-section-header-sticky', 'animate');
      this.header.classList.remove('shopify-section-header-hidden');
      document.body.classList.add('shopify-body-section-header-sticky');
      document.body.classList.remove('shopify-body-section-header-sticky');
    }

    reset() {
      this.header.classList.remove('shopify-section-header-sticky', 'shopify-section-header-sticky', 'animate');
    }

    sticky() {
      return this.header.classList.contains('shopify-section-header-sticky') && !this.header.classList.contains('shopify-section-header-sticky') && document.body.classList.contains('shopify-body-section-header-sticky') && !document.body.classList.contains('shopify-body-section-header-sticky');
    }
  }
  customElements.define('sticky-header', StickyHeader);

  window.addEventListener('scroll', function () {
    const topSection = document.querySelector('.shopify-section-announcement-bar');
    if (!topSection) return;

    const scrollPosition = window.scrollY || document.documentElement.scrollTop;

    // Calculate the height of the top section
    const topSectionHeight = topSection.offsetHeight;

    if (scrollPosition >= topSectionHeight) {
        // Add the 'sticky' class when scrolling past the top section
        topSection.classList.add('shopify-section-header-sticky');
    } else {
        // Remove the 'sticky' class when scrolling back to the top
        topSection.classList.remove('shopify-section-header-sticky');
    }
});

{% endjavascript %}

This will give you the same what I have on my demo store which you I guess checked.

Thanks

Sheesh B

5

Thank you so so much!! I will test soon!!