vicking Posted October 11 Share Posted October 11 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! Felix_DNH 1 🛠️ Builder of fine Squarespace templates 📺 Maker of no-BS Youtube tutorials 💬 Ask me anything! Link to comment
sebastian_dnh Posted October 13 Share Posted October 13 I love this tutorial – so smart yet so straight forward! Thanks @vicking Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment