How To Set Up A Fixed Navigation On Brine

If you’re looking to set a fixed navigation that remains transparent at the top of the page, follow this guide!

Demo Site

---

First of all, navigate to Design > Site Styles and set all the Header elements to display at the bottom. It should look something like in the image below.

---

Once that’s set, go to Design > Custom CSS and paste the following code:

html:not([data-scroll='0']) {
  header {         
      box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
    }    
.Header--bottom.Header--overlay {
    background: black;     
    position: fixed;   
  } 
}  

header {     
    padding-bottom: 1.5em;     
    transition: background-color .4s, box-shadow .4s;
}

---

Lastly, navigate to Settings > Advanced > Code Injection > Footer, and paste the following code:

<script>
const debounce = (fn) => {
  let frame;
  return (...params) => {
    if (frame) { 
      cancelAnimationFrame(frame);
    }
    frame = requestAnimationFrame(() => { 
      fn(...params);
    });
  } 
};

const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

document.addEventListener('scroll', debounce(storeScroll), { passive: true });

storeScroll();
</script>

---

That’s it! You should be all set at this point. The navigation should appear transparent at the top, and fixed with a background color on scroll.

Have a question? Post it below!