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!