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

  • 0

@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

Share this post


Link to post
  • 0

Thank you so much for your quick response @Silvabokis! However, I just tried you suggestion & but it says "syntax error" on the first line after entering that into the sitewide css...

Share this post


Link to post
  • 0

I needs to go in the sitewide code injection point:

Settings > Advanced > Code injection


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

I added that code to the code injection for the header and nothing seems to happen. It still says " search" as the last button on the nav bar- no block. What could be the problem? Again, Thank you so much for you response! I can't tell you how much I appreciate it!

Share this post


Link to post
  • 0

It could be that i have the targeting slightly wrong. Drop me a line via the contact link in my profile and I'll help you sort it out (for free).


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

I tried this code and it did put a search block in header. I did not play with trying to position it. Instead I put the search block in footer. Just normal editing to place it there. However, I did make my ishimoto footer full width.


<div id="search-wrapper" data-kbjs-widget="search-widget" data-autocomplete="true" data-search-id="nav-search">
         <form action="/search-results">
           <button type="button" id="search-button"></button>
           <input type="text" id="nav-search-box" name="q" placeholder="Search">
           <p class="search-instructions hidden">Press enter</p>
         </form>

Share this post


Link to post
  • 0

Thanks a lot. That gave me a search in my header, but the search isn't giving me any results. Not matter what I search it says nothing found. Do I have to alter anything to make it specific to my site?

Share this post


Link to post
  • 0

Not sure. I did not use the search in header on my website, so I did not investigate it further.It's possible that this code worked for earlier SqSp version.

@arthurm above seems to be suggesting adding a search page to your header navigation menu with some added trickery.
Or you could just have a page with the search function by itself? Not elegant, but functional.

Share this post


Link to post
  • 0

Not sure. I did not use the search in header on my website, so I did not investigate it further.It's possible that this code worked for earlier SqSp version.

@arthurm above seems to be suggesting adding a search page to your header navigation menu with some added trickery.
Or you could just have a page with the search function by itself? Not elegant, but functional.

Share this post


Link to post
  • 0

Any idea how to make this work on the Bedford template? I tried the code and it only modified the search block at the footer. It didn't replace the link at the header with the search box. Thanks!

Share this post


Link to post
  • 0

Any idea how to make this work on the Bedford template? I tried the code and it only modified the search block at the footer. It didn't replace the link at the header with the search box. Thanks!

Share this post


Link to post
  • 0

I've been searching all over for a thread that would help with the search bar and I am glad to say it worked! Thank you. Unfortunately, I realized that it replaced the last link in all of the folders to a search bar. Is there a way I can fix this? I am using the marquee template. I used the original coding that silvabokis posted for the aviator template rather than the one twearked for marquee. The marquee one didn't work at all, but this one did, except for that little problem. My site is www.voyageune.com/home if that helps

Share this post


Link to post
  • 0

I've been searching all over for a thread that would help with the search bar and I am glad to say it worked! Thank you. Unfortunately, I realized that it replaced the last link in all of the folders to a search bar. Is there a way I can fix this? I am using the marquee template. I used the original coding that silvabokis posted for the aviator template rather than the one twearked for marquee. The marquee one didn't work at all, but this one did, except for that little problem. My site is www.voyageune.com/home if that helps

Share this post


Link to post
  • 0

Hi everyone,

I created a search link using SQSP Guru's tutorial: http://www.sqsp.guru/news/squarespace-updates-the-search-block

However, I am using the Five template, and on my search page, I have my site-wide sidebar that shows up (this is a feature specific to Five). The problem is that the /search page does not have a settings page to allow me to turn off the sidebar for this page.

Does anyone have a workaround?

Share this post


Link to post
  • 0

Hi, thanks for this advice it has been really helpful!I have a question though, I have placed my search bar into my header - But I noticed that when you type something into the search bar and results start to appear it creates a lot of space to the right of the page. I think it does it for everyone? Because I looked at the sites linked here, and it's the same. Is there anyway to prevent the spare space from be created?

Share this post


Link to post
  • 0

Hi, thanks for this advice it has been really helpful!I have a question though, I have placed my search bar into my header - But I noticed that when you type something into the search bar and results start to appear it creates a lot of space to the right of the page. I think it does it for everyone? Because I looked at the sites linked here, and it's the same. Is there anyway to prevent the spare space from be created?

Share this post


Link to post
  • 0

I think I figured out a way to get rid of the spare space I was talking about -

Add this to the css editor


.yui3-widget.sqs-widget.yui3-searchpreviewdropdown.yui3-widget-positioned {
  position: relative;
  left: 731px;
  top: 69px;
  max-width: 200px;
}

I'm not sure if there is a simpler way to do it, but this worked for me. The max width should be the same as the chosen width of your search bar.

Share this post


Link to post
  • 0

Hi Silvabokis, I've tried to implement the code above into the Five template but it doesnt seem to work. I've fiddled with the code and got it displaying in the correct place...


<script type="text/javascript">
 $( init );
function init() {
$("#main-navigation > ul > li:nth-last-child(1) a").replaceWith($(".search-block"));
}
</script>

However now the search box doesnt work. If I strip back the code to #main-navigation the search works but this replaces the entire navigation.


<script type="text/javascript">
 $( init );
function init() {
$("#main-navigation").replaceWith($(".search-block"));
}
</script>

Any ideas?Site: healthandsafetyatworknz.squarespace.com

Share this post


Link to post
  • 0

Well I think I've figured a work around that gets the search bar in the right place and working correctly for the Five template. I'm not great at coding so if there's a better way to do this I'll take suggestions!


<script type="text/javascript">
$(window).load(function(){
  $(".search-block").insertAfter($("#main-navigation"));
});
</script>


Share this post


Link to post
  • 0

Hi therewould anyone on this post know how to add a search block to the Hayden header? I've tried all the codes above and nothing is working.

If someone could help me out, that would be great.

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