How to add a Search Block to the header?

None of these are working for the Marquee Template :-( any help would be much appreciated!

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

@arthurm - I've added a new answer for Marquee below.

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

I needs to go in the sitewide code injection point:

Settings > Advanced > Code injection

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!

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

Any chance someone can help me implement this into Ishimoto template?

I'm struggling getting it to work.

Any chance someone can help me implement this into Ishimoto template?

I'm struggling getting it to work.

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>

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?

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.

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.

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!

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!

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

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

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?

@silvabokis any idea what script code to use for Hayden template? Ive tried all the above without results.

Thanks

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?

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?

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.

Try to follow my article Inserting Squarespace Search Block

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

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>