Free Squarespace Plugin: Animated Header Navigation Bar

Feb 18, 2021
Difficulty level: easy-peasy
Squarespace version: 7.0

 

Improve your site functionality without compromising your design with this best of both worlds customization.

 

Programmed by hulo.dev
Illustration by Mayara Lista

 

With this smooth as butter Squarespace plugin the header navigation disappears on scroll, and reappears when scrolling up.

I don’t like to lock my header navigation because it crowds my page designs, especially with a large logo. On the other hand, keeping the navigation bar visible can improve site functionality. I like the solution I saw on sites like meatable.com and worked with hulo.dev to develop a similar element for our Squarespace websites. Preview this plugin on our two favourite client projects of 2020: Progress Parade and Seal Doc.

 
Woah, this GIF is playing really slow.

Woah, this GIF is playing really slow.

 
 

Step 01
Code Injection Footer

Navigation to Settings > Advanced > Code Injection and scroll down to the footer section. Paste in the following code.

<script>
     window.Squarespace.onInitialize(Y, function() {
          Y.all('body').addClass('page-loaded');
          if(Y.all('.view-item.collection-type-blog').size()>0){
               Y.all('.Mobile-bar.Mobile-bar--top').addClass('show-header');
          }
          var topOffset = 0;
          var startBg = window.innerHeight/2.2;
          console.log(startBg);
          window.addEventListener("scroll", function(event) {
               if(this.scrollY > startBg){
                    Y.all('body').addClass('show-header-bg');
               }else{
                    Y.all('body').removeClass('show-header-bg');
                }
          }, false);
     })
</script>


<script>
  window.Squarespace.onInitialize(Y, function() {
    Y.all('.Header.Header--top').addClass('show-header');
    Y.all('.Mobile-bar--top').addClass('show-header');

    var lastScrollTop = 0;
    // element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
    window.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
      var st = window.pageYOffset || document.documentElement.scrollTop; 
      if(st > 10){
        if (st > lastScrollTop){
          // downscroll code
          Y.all('.Header.Header--top').removeClass('show-header');
          Y.all('.Mobile-bar--top').removeClass('show-header');
        } else {
          Y.all('.Header.Header--top').addClass('show-header');
          Y.all('.Mobile-bar--top').addClass('show-header');
          // upscroll code
        }
      }
      if(st > 200){
        Y.all('.Mobile-bar--top').addClass('not-transparent');
      }else{
        Y.all('.Mobile-bar--top').removeClass('not-transparent');
      }
      lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
    }, false);
  });
</script>
 

Step 02
Custom CSS

In the Custom CSS window add the following code.

/* Detraform's Animated Navigation Bar, so good */

.Header.Header--top{
    background: hsla(360, 100%, 100%, .95);
    position: fixed;
    top: 0;
    z-index: 10;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    transition: transform @navigation-transition-duration ease-in-out;
    &.show-header{
        transform: translateY(0%);
    }
}
.tweak-mobile-bar-top-fixed .Mobile-bar--top{
    transform: translateY(-100%);
    transition: all @navigation-transition-duration ease-in-out;
    &.show-header{
        transform: translateY(0%);  
    }
}

   // Fix top spacing on shop/product/cart/blog pages //
.Main.Main--blog-list,
.Main.Main--blog-item,
.Main.Main--products-list,
.Main.Main--products-item,
#cart,
#collection-5fda8e0ecf855e2ff3b8b34f {
  padding-top: 8vw;
  @media only screen and (max-width: 1600px) {
    padding-top: 12vw;
  }
  @media only screen and (max-width: 1024px) {
    padding-top: 16vw;
  }
  @media only screen and (max-width: 640px) {
    padding-top: 0vw;
  }
}
 

GET THE BEST FREE RESOURCES FROM YOUR FRIENDS AT DETRAFORM HQ

 
 
 
 

Step 03
Watch the magic happen

Smooth like butter.

 
hulo-logo 2.png
 

The Squarespace design community has a secret weapon and it’s name is hulo.dev. Cody knows it, Rache and Puno know it, and now you know it too. Commission Hulo to develop your own custom Squarespace code and plugins. If you need help with Detraform’s animated navigation bar, send Hulo an email for trouble shooting at their hourly rate.

 
SquarespaceJoel Blair