How to add a Search Block to the header?

How can I add a Search Block to the top of the site, in or near the header? Thanks.

You can add a search bar with the Search Block and add it when you're in Style Mode, no code required:http://help.squarespace.com/guides/using-the-search-block#toc-add-the-search-block

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.

Thanks @scoobie for sharing!

A Search Block can be added to the footer using the standard editing tools.

Yes, but the question was specifically for the header. You can't use the standard editing tools to add content blocks to the header. A bit of trickery is needed for that! :)

Yes, that is correct. However, having it in the footer can be a temporary work around until you can figure out the trickery you need to get it into the header.

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/

silvabokis: The issue is the script and custom css. Are you willing to share?Is this the code you are talking about? http://www.silvabokis.com/news-views/2013/4/10/jvw4vybhjdmquivptb5sbo8tfw3c3q?rq=search

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

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.

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

Had another play around with this and got it to work in Avenue by replacing ".cf li:nth-last-child(1)" with "nav li:nth-last-child(1)". Currently active on http://www.boomandbloom.co.nz.

Only issue is that the search also replaces the last link in my dropdown menu.

Any thoughts?

Hi - the following should work.

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

Anyone know how to adapt this for Five?

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

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

Thanks for that. The last item in my dropdown menu is still also replaced with the search block but not the end of the world. Cheers

In that case, try

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

Thank you kindly for the quick response. Unfortunately however it appears to leave the Search field in the footer but restyles it whilst SEARCH still remains in the navigation bar.

Works perfectly! Appreciate the help. Thanks!

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

Can't seem to get @SquarespaceGuru 's wonderful search icon to work on my navigation in Five? Still shows SEARCH as text in the nav bar after I have put the link to the FontAwesome icon in the header code injection. Any ideas?

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!

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!