Adding a Search Bar To Your Header In Squarespace 7.1

Other BlocksFree

Jun 4

Update
If you run into any layout or formatting issues with this tutorial, consider this variation on the same theme: Adding A Search ICON To Your Header.

Hey there Squarespace-ers. I received this question from someone recently and I thought I’d share a solution for it!

Just wondered if you know a way to get a search bar/icon into the main header navigation? Squarespace 7.0 used to have this option in styles, but there is no option in 7.1 - Do you think this can be coded?

- Michael

And the answer is YES! In fact it can be coded, and relatively simply too.

Note: This tutorial doesn't deal with the search function itself, it will just show you how to move it to your header.

TABLE OF CONTENTS
The Quick Steps
The Walk-Through
The Video
The Code

Disclaimer: that this is just my one solution. Surely, there are other solutions out there. Most of the work in releasing a plugin isn’t in the building phase, it’s in the testing phase, making sure it works in all different types of environments & use-cases. With this plugin, I haven’t done much testing, I’m prioritizing getting the code out there, with a thorough explanation of what I did, so that you can use it. This tutorial is meant just to help people understand how I would approach solving this problem. With that said though, please send me any comments / updates you might have so others can benefit.

Quick Steps

Add a Search bar to the footer
Paste in the jQuery code to your Settings » Advanced » Code Injection » Page Header Code Injection area
Find the Block ID of your Search Bar and paste it into the Page Header Code Injection Area
Paste in the CSS to your custom CSS area

The Walk Through

Adding a search bar block to the header in Squarespace isn’t a native function of the platform, so that automatically tells me I’m going to have to use javascript to move things around. But instead of vanilla javascript, I’m going to use jQuery, a javascript library that helps me write javascript faster and more easily. So that’s what’s in the first <script> tags below.


  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

Next I need to add a search block on the page somewhere. Since we’ll be needing the search bar in the header on every page, it makes the most sense to add it in the footer, which is also on every page. So just add the Search block to your footer.

Next, let’s add some jQuery that selects the block id of the search bar and inserts it in the header right after all of the main links, but before the CTA button (if you have one).

  <script>
$(function(){
  let searchBlock = $('#BLOCK-ID-HERE');
  $(searchBlock).insertAfter($('.header-title-nav-wrapper'));
})
  </script>

Now the search bar should be in the header. Next, we need to to style it. So the best way to do this is to add a specific class to the searchBlock variable, then style it with CSS. Our code will then look like this:

  <script>
$(function(){
  let searchBlock = $('#BLOCK-ID-HERE').addClass('header-search-bar');
  $(searchBlock).insertAfter($('.header-title-nav-wrapper'));
  })
  </script>

  .header-search-bar{
  margin: 0 0 0 2.5vw;
}

Now we have the header search bar, styled how we like, but when we check it out on mobile it looks bad. So we need to readjust some things.

It’s important to know that the mobile menu items are totally different HTML elements than the desktop menu items even though they have the same text and links. So that’s why it’s not showing up in the mobile menu.

My method is to duplicate (Clone) the search bar and, similar to how we moved it to the main nav on desktop, we would move this duplicated search bar to the main nav on mobile.

Also, since id attributes should be unique per page, I’ve added in a line to our searchBlock variable to remove the id, and I’ve also a class attribute to the cloned version of the search bar so that we can add separate CSS properties to it.

  <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>

.header-search-bar{
  margin: 0 0 0 2.5vw;
  @media(max-width:799px){
    display:none;
  }
}
.mobile-header-search-bar{
  display:block;
}

A few other cosmetic styles, and voila! We’re all set.

.header-search-bar{
  margin: 0 0 0 2.5vw;
  @media(max-width:799px){
    display:none;
    margin: 0 0 0 0vw;
  }
}
.mobile-header-search-bar{
  display:block;
  padding-left:3vw;
  padding-right:3vw;
  .preScale{
    opacity:1 !important;    
  }
}

Tutorial Video

The Code

1. Choose one of the following layout options and add it to your PAGE Header Code Injection Area. (Page Settings » Advanced).

Add Search Bar to RIGHT of Nav Links

  <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');

       /*Place Desktop Search Bar*/ 
    $(searchBlock).insertAfter($('.header-title-nav-wrapper'));
    $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('[data-folder="root"] .header-menu-nav-folder-content'));
  })
</script>

Add Search Bar to Right of Site Title

<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');

       /*Place Desktop Search Bar*/ 
    $(searchBlock).insertAfter($('.header-title-nav-wrapper .header-title'));
    $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('[data-folder="root"] .header-menu-nav-folder-content'));
  })
</script>

Add Search Bar to right of Social Icons

<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');

    /*Place Desktop Search Bar*/ 
    $(searchBlock).insertAfter($('.header-actions-action.header-actions-action--social'));

    /*Create & Place Mobile Search Link*/ 
    $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('[data-folder="root"] .header-menu-nav-folder-content'));
  })
</script>

Add Search Bar to Left of The Cart

<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');

    /*Place Desktop Search Bar*/ 
    $(searchBlock).insertBefore($('.showOnDesktop .header-actions-action--cart'));

    /*Create & Place Mobile Search Link*/ 
    $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('[data-folder="root"] .header-menu-nav-folder-content'));
  })
</script>

<!-- Extra CSS Needed to center the Search Item-->
<style>
  .showOnDesktop{
    display: flex;
    align-items: center;
  }
</style>

Replace Mobile Menu Search Block with Search Link

Use one of the 3 layout options above to place the search block on desktop, then simply update the code under /*Create and Place Mobile Search*/ with what is below.


  <script>
  /*Create & Place Mobile Search Link*/ 
  $('Search').appendTo($('[data-folder="root"] .header-menu-nav-folder-content'));
})
    </script>

2. Add the following code your Custom CSS area. (Design » Custom CSS)

.header-search-bar{
  margin: 0 0 0 2.5vw;
}
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){
  .header-search-bar{
    display:none;
    margin: 0 0 0 0vw;
  }
}
.header-search-bar  .search-input{
  border: 1px solid currentColor !important;
}
.header-search-bar  .search-input::placeholder{
  color: currentColor !important;
}
.mobile-header-search-bar{
  background-color: transparent;
  display:block;
  padding-left:3vw;
  padding-right:3vw;
}
.mobile-header-search-bar .preFade, .mobile-header-search-bar .preScale,.mobile-header-search-bar .preSlide,.mobile-header-search-bar .preClip, .header-search-bar .preFade, .header-search-bar .preScale, .header-search-bar .preSlide, .header-search-bar .preClip{
  opacity:1 !important;  
  transform: scale(1) translate(0%,0%) !important;
  clip-path: unset !important;
}

Additional CSS Tweaks

Change Border Color

.header-search-bar .search-input{
    border: 1px solid white !important;
}

Change "Search" Color

.header-search-bar .search-input::placeholder, .header-search-bar .search-input{
  color:white !important;
}

Change Icon Color

The Icon is actually an image, not a true SVG Icon, so we can’t change the color directly, but we can replace the image. Use one of the two code snippets below.

Light Icon

.header-search-bar .search-input{
  background: url(/universal/images-v6/icons/icon-searchqueries-20-light.png) no-repeat 15px 50% !important;
}

Dark Icon

.header-search-bar .search-input{
  background: url(/universal/images-v6/icons/icon-searchqueries-20-dark.png) no-repeat 15px 50% !important;
}

Change Text Color

input[type="search"]{
  color:red !important;
}

Remove the Highlight Box On Focus

  .sqs-search-ui-button-wrapper .search-input.hover-effect:hover, .sqs-search-ui-button-wrapper .search-input.hover-effect:focus{
  outline: none !important;
}

Reduce Width of Search Box

.header-search-bar input{
   margin-left: auto;
   width:50% !important;
}

Squarespace 7.1

Will Myers

I support web designers and developers in Squarespace by providing resources to improve their skills.

https://www.will-myers.com

Adding a Search Bar To Your Header In Squarespace 7.1

Quick Steps

The Walk Through

Tutorial Video

The Code

Split Screen Layout Design in Squarespace 7.1

Adding a Background Image to a Button in Squarespace (plus a few other cool effects)

Sharpen your skills. Get better in Squarespace.

Sharpen your skills.
Get better in Squarespace.