Jump to content

how to keep the navigation bar while im scrolling, i'm using the bedford template

Recommended Posts

  • Replies 2
  • Views 459
  • Created
  • Last Reply

Hi,

Here's the solution.

Navigate to code Injection section of the site:  Settings > Advanced > Code Injection

Paste this code:

<script>
  window.onscroll = () => {
      var scrollPos = window.pageYOffset
      var header = document.getElementById('#header');
      if (scrollPos > 600) {
          header.classList.add('bgColor');
      } else {
          header.classList.remove('bgColor');
      }
  }
</script>

<style>
  header#header {
      position: fixed !important;
  }

  header#header.bgColor {
      background-color: black;
  }
</style>

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.