How to add a site search bar above your Squarespace header
This tutorial was recorded in Squarespace 7.1 but these codes will work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
In this blog post, you’ll learn how to add a Squarespace website search bar above the header, giving your visitors an effortless way to find the content they're looking for. We’ll use custom CSS to move a footer section with a search bar to the top on both desktop and mobile devices. If you are brand new to custom code, don’t worry! I’ll walk you through this step by super simple step in the video and instructions below.
Here are the steps from this tutorial:
Create a footer section that contains a search bar.
Adjust the search bar location and alignment on both desktop and mobile.
Navigate to Design, and select Custom CSS
Paste this code in your custom css, adjusting the margin-top value in the last line to fit the size of your search bar, which will be different than mine depending on your font!
Here are the selectors used in this tutorial:
By utilizing custom CSS, you've transformed your navigation, making it more user-friendly and convenient for visitors to find the information they need. Moving the footer section with a search bar to the top on both desktop and mobile ensures a seamless search experience across devices.
If you liked this tutorial, you’ll love these other two! ❤️ I have older tutorials that will teach you how to customize the Squarespace search bar itself and the search results page. Here are links to those if you want to check them out:
How to Customize the Search Results Page in Squarespace
In this tutorial, you’ll learn what custom codes you can use to make your Squarespace search result page look fabulous.
How to customize the search bar in Squarespace
This tutorial will teach you how to turn an ordinary search bar into one that matches your unique brand style using some simple custom CSS!