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

how to keep navigation bar while im scrolling, I'm using the bedford template
wht is a css code

I've linked to a blog post by @dualarrowmarketing which details how to make the navigation bar fixed on scroll.

https://insidethesquare.co/squarespace-tutorials/fixed-header-drop-shadow-squarespace-css

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>