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

How to add a Search Block to the header?


jpwv

Question

  • Answers 58
  • Created
  • Last Reply

Top Posters For This 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
Link to comment
  • 6

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

Link to comment
  • 1

@arthurm

Try the following for Marquee - I haven't tested it, but it should work.

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>
$("#desktopNav .main-nav nav-wrapper > ul.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

The specific css tweaks to make it look right will depend on your exact style configuration for your template.

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

Link to comment
  • 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

Link to comment
  • 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

Link to comment
  • 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

Link to comment
  • 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

Link to comment
  • 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.

Link to comment
  • 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!

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...