Add a Search Bar to the Header | Squarespace 7.1
What does this code do?
These code snippets will provide you with several header layout options that include a search bar.
Adding a search bar to the header of Squarespace 7.1 can be tricky. Each layout requires a different set of code snippets. To make things easier, I have provided several different layout options and their code snippets.
MOBILE RESPONSIVENESS: To help this feature be mobile friendly, the search bar will appear in the hamburger menu above the navigation links when viewed from a mobile device.
WARNING: If you have used a mobile check in your Footer Code Injection already, using it twice will cause the code to clash. You will need to combine it together. Click here to see our list of known clashes and how to fix them!
Video Tutorial
What to skip ahead?
Option 1 - 0:00
Option 2 - 3:10
Option 3 - 5:29
Option 1: Search Bar on the Left or Right
This layout will allow you to add a search bar on the left or right with your site-title or logo and navigation links in the center, and a button on the right. Take note that this layout does not include social icons or a cart.
Add Elements
Click to Edit the Site Header. Under Header Layout choose the last option. Then, under Elements turn on the Button and turn the Cart and Social Icons off.
Code Snippets
Copy and paste this code into Settings > Advanced > Code Injection > Header
<!--Search Bar in Header --> <div class="sqs-block search-block sqs-block-search" data-block-type="33" id="header-search"> <div class="sqs-block-content"> <div class="sqs-search-ui-text-input sqs-search-ui-button-wrapper color-dark" data-source="block" data-preview="true" data-collection=""> <div class="spinner-wrapper" style="display: none;" hidden="hidden"> <div class="yui3-widget sqs-spin light default"> <div class="sqs-spin-content"></div> </div> </div> <input type="search" class="search-input hover-effect" value="" placeholder="Search" aria-label="Search"> <div class="yui3-widget sqs-widget sqs-search-preview"> <div class="sqs-search-preview-content"></div> </div> </div> </div> </div>
Copy and paste this code into Settings > Advanced > Code Injection > Footer
<!-- Search Bar in Header -->
<script>
(function() {
var headerSearch = document.getElementById("header-search");
headerSearch.style.display = "block";
var headerNav = document.querySelector(".header-menu-nav-folder");
var headerDesktopDisplay = document.querySelector(".header-display-desktop");
function mobileCheck(x) {
if (x.matches) {
headerNav.prepend(headerSearch);
} else {
headerDesktopDisplay.prepend(headerSearch);
}
}
var x = window.matchMedia("(max-width: 640px)");
mobileCheck(x); // Call listener function at run time
x.addListener(mobileCheck); // Attach listener function on state changes
})();
</script>Choose whether you want it on the left or right and copy and paste the appropriate code into Design > Custom CSS.
/* Search Bar in Header on Left */ #header-search { max-width: 20%; min-width: 20%; } .header-display-desktop * { flex: 1 1 0; } .header-actions { text-align: right; } @media only screen and (max-width:640px) { #header-search { max-width: 100%; margin-right: auto; margin-left: auto; } }
/* Search Bar in Header on Right */ #header-search { max-width: 20%; min-width: 20%; } .header-display-desktop * { flex: 1 1 0; } @media only screen and (min-width:640px) { .header-actions { display: block; order: 1; } #header-search { order: 3; } .header-title-nav-wrapper { order: 2; margin-left: 0 !important; } } @media only screen and (max-width:640px) { #header-search { max-width: 100%; margin-right: auto; margin-left: auto; } }
How To Use It
Copy and paste the code snippets as indicated above.
This code is set up to use the dark version of the search bar. To use the light version, change the code “color-dark” to “color-light” in Settings > Advanced > Code Injection > Header
Bonus: I want the search bar to use the light version on desktop and the dark version on mobile.
If you want to use one version on desktop and one version on mobile use this code instead.
Note: The code checks the size of the screen when it loads. You will need to reload the frame in mobile mode to see the changes.
Copy and paste this code in Settings > Advanced > Code Injection > Header
<!--Search Bar in Header -->
<div class="sqs-block search-block sqs-block-search" data-block-type="33" id="header-search">
<div class="sqs-block-content">
<div class="sqs-search-ui-text-input sqs-search-ui-button-wrapper" data-source="block" data-preview="true" data-collection="">
<div class="spinner-wrapper" style="display: none;" hidden="hidden">
<div class="yui3-widget sqs-spin light default">
<div class="sqs-spin-content"></div>
</div>
</div>
<input type="search" class="search-input hover-effect" value="" placeholder="Search" aria-label="Search">
<div class="yui3-widget sqs-widget sqs-search-preview">
<div class="sqs-search-preview-content"></div>
</div>
</div>
</div>
</div>Copy and paste this code in Settings > Advanced > Code Injection > Footer
<!-- Search Bar in Header -->
<script>
(function() {
var headerSearch = document.getElementById("header-search");
headerSearch.style.display = "block";
var headerNav = document.querySelector(".header-menu-nav-folder");
var headerDesktopDisplay = document.querySelector(".header-display-desktop");
function mobileCheck(x) {
if (x.matches) {
headerNav.prepend(headerSearch);
document.querySelector(".sqs-search-ui-button-wrapper").classList.add("color-light"); //light color on mobile
} else {
headerDesktopDisplay.prepend(headerSearch);
document.querySelector(".sqs-search-ui-button-wrapper").classList.add("color-dark"); // dark color on desktop
}
}
var x = window.matchMedia("(max-width: 640px)");
mobileCheck(x); // Call listener function at run time
x.addListener(mobileCheck); // Attach listener function on state changes
})();
</script>Option 2: Search Bar Underneath Main Header
This layout will allow you to add a search bar underneath your regular header. This option will work with any of the other header layout options as well as the button, social, icons, and cart.
Add Elements
Click to Edit the Site Header. Choose any of the header layouts and add whichever elements you would like including a button, social icons, and/or cart icon.
Code Snippets
Copy and paste the following into Settings > Advanced > Code Injection > Header
<!--Search Bar in Header --> <div class="sqs-block search-block sqs-block-search" data-block-type="33" id="header-search"> <div class="sqs-block-content"> <div class="sqs-search-ui-text-input sqs-search-ui-button-wrapper color-dark" data-source="block" data-preview="true" data-collection=""> <div class="spinner-wrapper" style="display: none;" hidden="hidden"> <div class="yui3-widget sqs-spin light default"> <div class="sqs-spin-content"></div> </div> </div> <input type="search" class="search-input hover-effect" value="" placeholder="Search" aria-label="Search"> <div class="yui3-widget sqs-widget sqs-search-preview"> <div class="sqs-search-preview-content"></div> </div> </div> </div> </div>
Copy and paste the following into Settings > Advanced > Code Injection > Footer
<!-- Search Bar in Header -->
<script>
(function() {
var headerSearch = document.getElementById("header-search");
headerSearch.style.display = "block";
var headerNav = document.querySelector(".header-menu-nav-folder");
var headerDesktopDisplay = document.querySelector(".header-display-desktop");
function mobileCheck(x) {
if (x.matches) {
headerNav.prepend(headerSearch);
} else {
headerDesktopDisplay.after(headerSearch);
}
}
var x = window.matchMedia("(max-width: 640px)");
mobileCheck(x); // Call listener function at run time
x.addListener(mobileCheck); // Attach listener function on state changes
})();
</script>Copy and paste the following into Design > Custom CSS
/*Search Bar in the Header */ .header-inner { flex-direction: column; } #header-search { width: 80% !important; margin-right: auto; margin-left: auto; } @media only screen and (max-width:640px) { #header-search { max-width: 100%; } }
How To Use It
Copy and paste the code snippets as indicated above.
This code is set up to use the dark version of the search bar. To use the light version, change the code “color-dark” to “color-light” in Settings > Advanced > Code Injection > Header
Bonus: I want the search bar to use the light version on desktop and the dark version on mobile.
If you want to use one version on desktop and one version on mobile use this code instead.
Note: The code checks the size of the screen when it loads. You will need to reload the frame in mobile mode to see the changes.
Copy and paste this code in Settings > Advanced > Code Injection > Header
<!--Search Bar in Header -->
<div class="sqs-block search-block sqs-block-search" data-block-type="33" id="header-search">
<div class="sqs-block-content">
<div class="sqs-search-ui-text-input sqs-search-ui-button-wrapper" data-source="block" data-preview="true" data-collection="">
<div class="spinner-wrapper" style="display: none;" hidden="hidden">
<div class="yui3-widget sqs-spin light default">
<div class="sqs-spin-content"></div>
</div>
</div>
<input type="search" class="search-input hover-effect" value="" placeholder="Search" aria-label="Search">
<div class="yui3-widget sqs-widget sqs-search-preview">
<div class="sqs-search-preview-content"></div>
</div>
</div>
</div>
</div>Copy and paste this code in Settings > Advanced > Code Injection > Footer
<!-- Search Bar in Header -->
<script>
(function() {
var headerSearch = document.getElementById("header-search");
headerSearch.style.display = "block";
var headerNav = document.querySelector(".header-menu-nav-folder");
var headerDesktopDisplay = document.querySelector(".header-display-desktop");
function mobileCheck(x) {
if (x.matches) {
headerNav.prepend(headerSearch);
document.querySelector(".sqs-search-ui-button-wrapper").classList.add("color-light"); //light color on mobile
} else {
headerDesktopDisplay.after(headerSearch);
document.querySelector(".sqs-search-ui-button-wrapper").classList.add("color-dark"); //dark color on desktop
}
}
var x = window.matchMedia("(max-width: 640px)");
mobileCheck(x); // Call listener function at run time
x.addListener(mobileCheck); // Attach listener function on state changes
})();
</script>Option 3: Add a Search Icon That Links to a Search Page
This layout will allow you to add a search bar icon after the button that links to a search page on your site.
Style Your Search Page
Your website has a search page already designed for you.
Check it out at www.yourdomainname.com/search?q
However, you cannot style or customize this page. So if you do not like the look of this page, create a custom search page in your not linked section. Then use the link to that page in the following steps instead of /search?q.
Code Snippets
This code snippet uses Font Awesome for the search icon. To use Font Awesome, you will need to copy and paste your personal Font Awesome Kit Code into Settings > Advanced > Code Injection > Header. You only need this script once per site, so if you are already using Font Awesome Icons on this site, you can skip to the next code snippet.
To learn how to get your own Font Awesome Kit Code, click here. It will look something like the following.
<!-- Font Awesome --> <script src="https://kit.fontawesome.com/12345abcde.js" crossorigin="anonymous"></script>
Then copy and paste the following underneath your personal Font Awesome Kit Code.
<!-- Search Icon in Header --> <div class="header-search" style="display:none;"> <a href="/search?q"><i class="fas fa-search fa-lg"></i></a> </div>
If you are using the built-in search page created for you, leave the code as is. If you are using a search page that you created, edit “/search?q” to be the url of the page you created.
Then copy and paste the following code in Settings > Advanced > Code Injection > Footer.
<!-- Search Icon in Header -->
<script>
(function() {
var headerSearch = document.querySelector(".header-search");
headerSearch.style.display = "block";
var headerNav = document.querySelector(".header-menu-nav-folder");
var headerActions = document.querySelector(".header-actions");
function mobileCheck(x) {
if (x.matches) {
headerNav.prepend(headerSearch);
} else {
headerActions.after(headerSearch);
}
}
var x = window.matchMedia("(max-width: 640px)");
mobileCheck(x); // Call listener function at run time
x.addListener(mobileCheck); // Attach listener function on state changes
})();
</script>Copy and paste the following code into Design > Custom CSS.
/* Search Icon in Header */ .fa-search { margin-left: 20px; } /* Colour on Dark Themes */ .dark, .dark-bold, .black, .black-bold, .bright { .fa-search { color: white; } } /* Colour on Light Themes */ .white, .white-bold, .light, .light-bold, .bright-inverse { .fa-search { color: black; } } @media only screen and (max-width:640px) { .fa-search { margin-left: 0px; margin-top: 5px; } }
Change the Icon
The following code sets the icon. Go to Font Awesome and find the icon you want to use. Click on the icon and copy and paste the class for that icon in place of fas fa-search.
class="fas fa-search fa-lg
Animate the Icon
To learn how to animate the icon, click here.
Resize the Icon
Go to the Font Awesome Size Guide to see your size options.
How To Use It
Prepare your search page (optional).
Copy and paste the code snippets as indicated above.
Edit the colour, size, and spacing of the icon.
