Hey, footer lurkers...

 

We get it, you like our site. Why else would you be nosing around in the footer?  It means you've probably read all our content, or want to see more about how this site was designed. Well here's the scoop...

 

The simple facts

Template: Rally  |  Fonts: Proxima Nova & Garamond Premier Pro Display  |  Plugins: Swatches, Tabs

 

FILES (CODE & STYLES)

 

Dropdown Navigation Javascript


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div class="nav2">
  <input id="hamburger" type="checkbox">
  <label for="hamburger" class="checkburger">
    <span class="top-bun"></span>
    <span class="meat"></span>
    <span class="bottom-bun"></span>
  </label>
  <div class="menu">
  <ul>
      <li class="small-social"><p>Start Here</p></li>
    <li><a href="/home">Home</a></li>
       <li><a href="/about">About</a></li>
      <li><a href="/blog">Tutorials</a></li>
           <li><a href="/squarespace-courses">Courses</a></li>
      <li class="small-social"><p>Shop</p></li>
      <li><a href="/sites">Magic Sites</a></li>
    <li><a href="/website-services">Website Services & Lessons</a></li>
      <li class="small-social"><p>More</p></li>
      <li><a href="https://www.facebook.com/groups/squarespacecss/">CSS Resource Group</a></li>
    <li>&nbsp;</li>
    <hr>
    <li class="small-social"><p>#SquarespaceMagic</p></li>
    <li class="small-social"><a href="https://instagram.com/squarespacebasics" target="_blank">Instagram</a></li>
     <li class="small-social"><a href="https://www.youtube.com/channel/UChwnFjMU4lHPflyvZTl9lAA" target="_blank">YouTube</a></li>
    <li class="small-social"><a href="https://www.pinterest.com/brandingbabesco/squarespace/" target="_blank">Pinterest</a></li>
      <li class="small-social"><a href="https://www.facebook.com/groups/squarespacecss/" target="_blank">Facebook</a></li>
  </ul>
  </div>
</div>

 

Hides Cart Until 1 Item Is Added Javascript


<script>
 (function () {
   var carts = [].slice.call(document.querySelectorAll('.Cart'));
   carts.forEach(function(cart) {
     hideCart(cart);
   });
   function hideCart(cart) {
 
     var cartQty = cart.querySelector('.sqs-cart-quantity');
 
     // Handler
     function handler(target) {
       if (target.innerHTML === '0') {
         cart.setAttribute('hidden', '');
       } else {
         cart.removeAttribute('hidden');
       }
     }
 
     // Observer handler
     var observer = new MutationObserver(function(mutations) {
       handler(mutations[0].target);
     });
 
     // Hide/show the cart when the page is loaded
     handler(cartQty);
 
     // Hide/show the cart when an item was added/removed
     observer.observe(cartQty, { childList: true });
   }
 
 })();
 
 </script>

 

Makes $0 turn into FREE Javascript


 <script>
    var products = document.querySelectorAll('.ProductItem, .ProductList-item'),
      i, len = products.length;
    for (i=0; i<len; i++) {
      var price = products[i].querySelector('.sqs-money-native');
      if (price.textContent === '0.00') {
        price.parentNode.textContent = 'FREE';  
      }
    }
  </script>