Jump to content

How to add a Search Block to the header?

Recommended Posts

  • 3 months later...
  • Replies 58
  • Views 42.7k
  • Created
  • Last Reply
  • 3 weeks later...

Squarespace have reengineered the Search Block and there's a way to put it in the header/top level navigation using the dedicated search page yourwebsite.com/search and add a link page with that search address to your top level navigation.

Credit to @SquarespaceGuru for this tip, check out write up which explains it better and subscribe to his newsletter, Squarespace Updates the Search Block and Squarespace: Using the Search Block.

Note: If you have an old Search Block you may need to delete it and add a new Search Block to get it to work.

Link to comment
  • 4 months later...

Am I missing something @SquarespaceGuru, or does your method simply add a link to the search page to the menu bar rather than have a functioning search input box in the menu bar?

@jpwv I use a hybrid approach: add a link to Search to the menu bar and a search block in the footer. Then use script and custom css to replace the link with the search block and style it nicely. This gives a fully functioning search input box in the menu bar.

See http://www.silvabokis.com/

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

Here's how I did it on my site, which uses the Aviator template.

NB. The specific targeting for the scripts and css to work vary from template to template.

First create a link as the last item in your main navigation. This link can be to anything, but calling it Search and linking to /search keeps things tidy.

Next create a search block in your site footer.

Then add the following script to your sitewise code injection point.


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
 $(".cf li:nth-last-child(1) a").replaceWith($(".search-block"));
</script>

This replaces the last item in the site navigation with the search box.

Finally, add some css to the custom css editor to tidy things up


.sqs-block-search {
 padding-top:0 !important;
 padding-bottom:0 !important;
}
.cf li{
 vertical-align:middle;
}
.search-input {
 background-color: white !important;
 max-width:200px;

}
.search-input::-webkit-input-placeholder {
  color: black;
}

.search-input:-moz-placeholder { /* Firefox 18- */
  color: black;  
}

.search-input::-moz-placeholder {  /* Firefox 19+ */
  color: black;  
}

.search-input:-ms-input-placeholder {  
  color: black;  
}

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

Hi,

I just wrote it up in an Answer on this thread.

Oh.. ..and the code you found was something specific for a user from a long time ago, before the standalone search page existed.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

Nice workaround @silvabokis but unfortunately I tried implementing this through the Avenue template and no luck. Do you have any suggestions as to how I could adjust the script to suit this template?

I'm currently having to add the search block into the header of every new page I create but have run into a road block with doing so using the index page, no header edit options given.

Cheers!

http://www.boomandbloom.co.nz

Link to comment

Hi - the following should work.


$(".main-nav ul > li:nth-last-child(1) a").replaceWith($(".search-block"));

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

SEARCH IN MAIN NAVIGATION - FIVE TEMPLATE

NB. I haven't applied this to a site - I've deduced the code by looking at the code of a site that uses the Five template. Please confirm and accept the answer if you apply it and it works. If there are any problems, post them as comments to this answer and I'll try to apply fixes.

First create a link as the last item in your main navigation. This link should be called Search and link to /search as it appear as a link rather than an input box in the mobile navigation.

Next create a search block in your site footer.

Then add the following script to your sitewise code injection point.


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
 $("nav#main-navigation > ul > li:nth-last-child(1) a").replaceWith($(".search-block"));
</script>

This replaces the last item in the site navigation with the search box.

Finally, add some css to the custom css editor to tidy things up


.sqs-block-search {
 padding-top:0 !important;
 padding-bottom:0 !important;
}
nav#main-navigation > ul li {
 vertical-align:middle;
}
.search-input {
 background-color: white !important;
 max-width:200px;

}
.search-input::-webkit-input-placeholder {
  color: black;
}

.search-input:-moz-placeholder { /* Firefox 18- */
  color: black;  
}

.search-input::-moz-placeholder {  /* Firefox 19+ */
  color: black;  
}

.search-input:-ms-input-placeholder {  
  color: black;  
}



I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

@Sartorial I have posted an answer for you elsewhere on this thread.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

In that case, try


$(".main-nav > ul > li:nth-last-child(1) a").replaceWith($(".search-block"));

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

@silvabokis You're not missing anything, my method does add a link to the main navigation. Most people asking questions on this forum couldn't even begin to implement a solution like yours. That's not a snub to anyone, it's just the truth. Major js & css tweaks are necessary for a functioning search bar in the header. Not to mention it looks so 1997. Swifttype has the perfect solution, but who really wants to pay $100/mo. My solution is a perfect fit for most.

I run the Squarespace Guru blog (www.sqsp.guru) and host the Squarespace Guru podcast.

Link to comment
  • 2 weeks later...

Hi there,Im also wanting to add a search block to my header but im using the pacific template and this CSS code doesnt work for me. It sits in the footer too.

Does anyone know the right trickery for the pacific template (the scrolling page)

Thanks!

Link to comment

Hi there,Im also wanting to add a search block to my header but im using the pacific template and this CSS code doesnt work for me. It sits in the footer too.

Does anyone know the right trickery for the pacific template (the scrolling page)

Thanks!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.