Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 4
jpwv

How to add a Search Block to the header?

Question

Recommended Posts

  • 6

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.

Edited by scoobie

Share this post


Link to post
  • 5

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

In that case, try


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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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! :)


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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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/

Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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.

Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

Hi - the following should work.


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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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



Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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.

Search Field

Edited by Sartorial

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...