Jump to content

Creating a custom search icon in header for Monocle

Recommended Posts

I've really been liking Monocle site search (affiliate link)... So I made a lil' review and tutorial video about how to turn their search link in your site header into an SVG icon.

If you wanna jump straight into the code:

Header Code Injection (you can swap the SVG with any other; I like svgrepo.com for SVGs. Just remember to change the SVG's color in the code to currentColor to integrate with your site's color scheme.)

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    // Select all potential search links in the header for both desktop and mobile
    var searchLinks = document.querySelectorAll('header a[href="/search"]');
    searchLinks.forEach(function(link) {
      link.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="bi bi-search" viewBox="0 0 24 24">
          <path fill="currentColor" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"/>
        </svg>
      `;
    });
  });
</script>

Custom CSS (to align and space it on desktop and mobile)

/* Style for the search icon header */
  #header a[href="/search"] svg {
  fill: currentColor; 
  width: 24px;        
  height: 24px;       
  vertical-align: middle;
}

/* Style for the search icon in mobile menu */

.header-menu-nav-item a[href="/search"]{
transform: scale(1.4);   
margin: 10px 0px 0px 0px;
}

Sorry/notsorry for the provocative video title...

More detail in text form on my blog post.

Great work @Felix_DNH!

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.