Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Misael

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

Question

2 answers to this question

Recommended Posts

  • 0

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


If you see an answer that was helpful please consider hitting the 121238226_Screenshot2019-11-02at14_53_39.png.0416997a5e856e0159fa1edbd624659e.png button on the right. 

Need help with your website or online store? Feel free to get in touch.

thompsonweb.design

Share this post


Link to post
  • 0

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>

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...