How to add a search icon to your header navigation - Squarespace 7.1

If you want to add a little search icon to the header of your website, it’s actually pretty simple and makes a big difference for your visitors. Let’s say you’re working on a site and you want people to easily find recipes, products or articles without scrolling around.

Step 1:

Add a “Search” link to your ‘Main Navigation’ with the URL linking to /search

Step 2:

Copy the code below and paste it into “Code Injection > Header”

Step 3:

You can customise the size or colour of the icon, but for now it’s been set to 24px.

---

<script type="text/javascript">
  (function() {
    /* ——— CUSTOMISE HERE ——— */
    var strokeWidth = 2.5; // Adjust icon weight: 1.5 = light, 2.5 = medium, 3.5 = bold
    /* ————————————————————— */

    function initSearchIcon() {
      var headerAnchors = document.querySelectorAll('header a[href="/search"]');
      var searchSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentColor" stroke-width="' + strokeWidth + '" stroke-linecap="round" stroke-linejoin="round"><circle cx="13" cy="13" r="8"/><line x1="19" y1="19" x2="27" y2="27"/></svg>';
      headerAnchors.forEach(function(anchor) {
        anchor.innerHTML = searchSVG;
      });
    }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initSearchIcon);
    } else {
      initSearchIcon();
    }
  })();
</script>

Then use the following code to style it, adding it to your Custom CSS

Add for Left Aligned on Mobile Menu

/* Search icon – desktop header */
#header a[href="/search"] svg {
  stroke: currentColor;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* Search icon – mobile menu left align */
.header-menu-nav-item a[href="/search"] {
  transform: scale(1.4);
  margin: 10px 0 0 0 !important;
  padding-left: var(--menuOverlay-navigation-padding, 5%) !important;
}

---

Then use the following code to style it, adding it to your Custom CSS

Add for Center Aligned on Mobile Menu

/* Search icon – desktop header */
#header a[href="/search"] svg {
  stroke: currentColor;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* Search icon – mobile menu center align */
.header-menu-nav-item a[href="/search"] {
  transform: scale(1.4);
  margin: 10px 0 0 0;
}