How to add a search bar to the navigation menu on Squarespace 7.1
How to add a search bar to the navigation menu on Squarespace 7.1
We have long missed the search bar feature from 7.0 websites! So you may be looking to create a search bar in the navigation menu on your Squarespace website, if so here’s what you need to do.
So here’s what you need to do to add a search bar into the navigation on your Squarespace website…
Step 1
Add a search block into your footer on your website. Once you have added this block, copy the block ID code. A quick way to find out your block ID code is to use a chrome plugin such as ‘Square ID Finder ‘
Step 2
Add the code below into your injection code area in the Header Section
Go to Settings > Developer Tools > Code injection > then paste the below code, then hit save.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function(){
let searchBlock = $('#block ID here').attr('id','').addClass('header-search-bar');
$(searchBlock).insertAfter($('.header-title-nav-wrapper'));
$(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content'));
})
</script>
Step 3
Add the CSS code to style your search bar
Add the below code to your custom css. Go to > Design > Custom CSS and paste the code. Feel free to change the sizing and colors to suit your needs.
/*Search bar section*/
.header-search-bar{
margin: 0 0 0 2.1vw;
@media(max-width:999px){
display:none;
margin: 0 0 0 0vw;
}
}
.mobile-header-search-bar{
display:block;
width: 80%;
padding-left:10vw;
padding-right:3vw;
.preScale{
opacity:1 !important;
}
}
/*search bar size*/
.sqs-search-ui-button-wrapper .search-input {
padding-top: 4px;
padding-bottom: 4px;
font-size: 0.8rem;
width: 80%;
}
@media(max-width:640px){
.sqs-search-ui-button-wrapper .search-input {
padding-top: 10px;
padding-bottom: 10px;
font-size: 1rem;
width: 100%;
}}
/* full search page */
.sqs-search-page-input {background: #F2F2E7;
border: 2px solid #786F65;}
So thats my guide on how to add a search bar in the navigation menu on Squarespace 7.1 websites. For more cool Squarespace tips check out my blog, or sign up to my newsletter.
Did I help you? Consider buying me a coffee as thanks!
