Add An Active Page Indicator on Mobile for Squarespace Websites

Squarespace mobile menus can be a little boring. They also cover the entire mobile screen - sometimes leaving forgetful users unaware of which page they are actually currently viewing. So we whipped up this code to show which link is active on mobile menus. You can use it to change the color of the active link in your mobile menu, you can add a background color, or even add an indicator icon before or after it. We're partial to a vertical line on the left side (or better yet, a BREAK in a vertical line.

 
Screen Shot 2018-07-26 at 9.17.42 PM.png
 

Step 1: Advanced Code Injection

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
  $(function(){
    $(".Mobile-overlay-menu-main a, .Mobile-overlay-folder a").each(function() {
      if ($(this).prop('href') == window.location.href) {
        $(this).addClass('current');
      }
    });
  });
  </script>

Step 2: Custom CSS

Example 1: Add an indicator Icon before or after the active link using Squarespace's UI Font (codes below).

 a.current::after {
font-family: 'squarespace-ui-font';  
font-style: normal;  
font-weight: normal;  
-webkit-font-smoothing: antialiased;  
display: inline-block;  
vertical-align: middle;  
speak: none;  
content: "\E012";  
color: #cccccc !important;
display: inline-block;}

Click to enlarge.

Example 2: Add an indicator line on the left that changes color on the active link, and change the color of the active link.

a.current
{color: #cccccc !important;
border-left: 2px solid #cccccc;}

.Mobile-overlay-nav-item, .Mobile-overlay-folder-item
{border-left: 2px solid #333333;
padding-left: 15px;}

How did you use this code to spruce up your mobile menus? Let us know below!