How to make sticky header if not on homepage?

Store Design
, ,
1

A while ago, a saw that there is a code which can make sticky header on every page, while the header on home page is transparent. Can anyone help me? My website is corbie.store

2

Yes, Here is the code that make your header sticky on all pages.
Paste this code in the end of base.css file.

.header-wrapper{
position: fixed !important;
width: 100%;
}

If you need more help let me know.

Thanks

3

Looking at your Corbie store header, here’s the simple solution to make the header sticky on other pages:

  1. Open your theme.liquid file
  2. Find the closing tag (it should be right before )
  3. Just before , add this code:
{%- unless template == 'index' -%}
  
{%- endunless -%}

Keep in mind that will be transparent all the time, so you are going to need some js to handle the background change on scroll. If you need it, this should work

document.addEventListener('scroll', function() {
  const header = document.querySelector('.header-wrapper');
  if (window.scrollY > 100) {
    header.style.background = 'var(--gradient-background)';
    header.style.borderBottom = '1px solid rgba(var(--color-foreground), 0.75)';
  } else {
    header.style.background = 'transparent';
    header.style.borderBottom = 'none';
  }
});

Not the best solution but hopfully it will work for you