How to Add a Search Bar Above Navigation in Squarespace 7.1
If you know anything about me, you know that I am all about making it as easy as possible to help website visitors 1) find what they’re looking for, 2) do what you want them to do, and 3) provide a ton of free value to build trust with your brand.
If you provide too many options to your visitors, you’ll cause decision fatigue and defeat the whole purpose. I have another post entitled Optimize Your Website’s Navigation Menu–Improve Engagement that talks more about this.
That said, there are many instances where including a search bar above your navigation menu can come in handy in guiding your website visitors to the thing(s) they are looking for, while also bringing them to exactly where you want them to be.
Let’s dive into this a bit more…read on!
When to Put a Search Bar Above Navigation
Let me repeat something I’ve said before that bears repeating: Don’t clutter up your navigation menu.
If adding a search bar above navigation can be accomplished without cluttering up navigation options while at the same time helping guide visitors to where both you and your visitor want them to be, then this would be the time to use it.
Here are a few examples that I can think of where this would work well, but you may have more ideas:
When you have a blog
When you have a recipe collection
If you have an e-commerce website
If you host events and have a robust events calendar
If you host photo albums for your clients
How to Add a Search Bar Above Navigation in Squarespace 7.1
Add a Footer Section
It doesn’t matter what page you’re on when you do this because you are adding a footer and then we’re going to add a code snippet to move that section to the top of every page.
Go to any page and select ‘Edit’
Scroll all the way to the bottom and select ‘Edit footer’
Add a blank section to the top of the footer, select ‘Edit section,’ and toggle off ‘Fill screen’
Select +Block and add a search bar
Edit the search bar by identifying which area of your website you want to be searchable and how you want it to appear (light theme vs. dark theme). Make sure the bar is centered vertically.
Add a text block and add text to reflect what is being searched, for example, ‘Search the blog.’ Align the text to the right and center the text vertically.
Close up the space in this section, and center the blocks vertically and horizontally.
Toggle over to Mobile view and make it look good here too with everything aligning the way you like it.
Add the Code Snippet to Custom CSS
Now that you’ve created the content, let’s move it up the page above the navigation.
Go to Website > Website tools > Custom CSS
Copy and paste the code snippet below and select ‘Save’
Expand your screen to see how it looks. You might need to adjust the value for the top margin. In the code snippet, it’s 4rem. I had to enlarge mine to 8rem to accommodate the entire search bar.
Stand back and admire your handiwork.
/* Add search bar above navigation */
#footer-sections .page-section:nth-child(1) {
position: fixed!important;
top: 0!important;
z-index:9 9!important;
width: 100%!important;
height: auto!important;
}
header,#page{
margin-top: 4rem!important
}
How to Edit This Section Now
Nice work!
Now, if you want to edit or change this section in any way going forward, like maybe change the color, the text, or even the search parameters, it’s super easy.
Select ‘Edit’
Scroll all the way down and select ‘Edit footer’
Now scroll back up to the top and edit this section
So easy, right?
Will You Do This?
Did you end up here because you were looking for a way to add ‘Search’ to navigation? What are you using it for? Do you still think you need it? Please share your thought below. 👇
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
