Adding a search bar underneath the logo or in the header.

I'm using the Adirondack template and have been able to add a search bar in a page, but don't like it there and want it to be in the header or underneath the logo. Another problem I had was it wasn't displaying the prices of my products which I would really like it to show.

Thank you in advance

It takes a lot of custom coding to do it right. There used to be a way do it fairly easily with SS6 and the old search button, but that all changed in the summer apparently. I finally got mine to work last night, taking me about 10 hours from figuring out the proper JS, JSON, and CSS. But wait, it gets better! Going through this process you are also rewarded with a headache.

I don't want anything too fancy, just a search box that can be accessed in the header from any page rather than having to click on a link to bring up the search box. But yeah, I'm not really in the mood for much coding...

It doesn't really matter, fancy or not it was a pain for me to put it in there. I would copy and paste the code I used here but I can guarantee that it would be different for your site. If you wanted to I could freelance it for you, or I am sure one of the developers could as well if you really needed it.

Not sure about the prices either. I haven't tried to edit that since it's not even in the developer templates.

It's a pity squarespace doesn't have an inbuilt feature for this kind of stuff. There seems to be a large demand for it.

Having the same issue here. Would love to add a Search Bar in my Supply based theme.. any one out there know any code for this?

It can be done by making a link to search in your navigation and then swapping out the link for the search box using a script.

There's a thread somewhere on here where I posted some code to do the job.

The solution below works in Flatiron, slight changes are needed for other templates as their menu code uses different classes/structure.

The idea is to include a link to search in your main navigation and then use code to swap it for the search input block. This has the advantage of integrating it with the navigation.

First, add a link to /Search in your navigation.

Then add a search block in your page footer.

Then add the following jQuery to the sitewide code injection point.

The following line is only needed if you haven't already linked to jQuery library

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

The main script:

<script type="text/javascript">
$(window).load(function(){
/* Moves the search bar to replace the search link */
 $(".main-nav #nav > li:nth-last-child(1) a").replaceWith($(".search-block"));
});
</script>

Then there's some css needed to make thinks look pretty. Again, this will vary from template to template.

/* Fallback for mobile - just show Search link with spyglass icon */
#mobile-navigation > ul > li:nth-last-child(1) a:before {
content: url(/universal/images-v6/icons/icon-searchqueries-20-light.png);
vertical-align: -15%;
}
#mobile-navigation ul>li:nth-last-child(1) a {
margin-left:-5px;}

#mobile-navigation ul li {
 vertical-align:middle;
}

/* Tidy up alignment in browsers */
.sqs-block-search {
 padding-top:0 !important;
 padding-bottom:0 !important;
}
.search-input {
 max-width:200px;

}
.sqs-search-ui-button-wrapper.color-light .search-input {
 height:35px;
}
/* Make the results preview area wider so that the previews can be seen */
.sqs-search-preview-ui {
 width:180%;
}

Didn't work for me on the Supply template. Search bar remains in the footer.

@Lesnyc

Supply's menu code is significantly different so my other answer here would need amending.

NOTE: I haven't tested this code on a Supply themed site, so it may not work as expected.

The code would be something like:

<script type="text/javascript">
$(window).load(function(){
/* Moves the search bar to replace the search link */
 $("nav.navigation-secondary > li:nth-last-child(1) a").replaceWith($(".search-block"));
});
</script>

The parts of the css relating to moble navigation would be redundant, as Supply uses the same navigation code (with different presentation) for mobile and desktop.

Something like the following would be a good starting point for the styling.

/* Tidy up alignment in browsers */
.sqs-block-search {
 padding-top:0 !important;
 padding-bottom:0 !important;
}
.search-input {
 max-width:200px;

}
.sqs-search-ui-button-wrapper.color-light .search-input {
 height:35px;
}
/* Make the results preview area wider so that the previews can be seen */
.sqs-search-preview-ui {
 width:180%;
}

@silvabokis

Thanks for your help.. unfortunately the swap doesn't work on the Supply Theme. All the CSS works, but the search block itself doesn't swap w/ the search link on the side-nav.

It's probably a tiny error in my coding. Drop me a line via the contact in my profile and I'll help you sort it out.

I figured out how to remove the spare space I used the following code in the css editor -

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

Not sure if there is a better way to do it? But it worked for me.

Just need to figure out how to swap the search to a link for the mobile page - any help much appreciated, Thanks.

Try to follow my article Inserting Squarespace Search Block

Hi

Does anyone have any idea - what needs changing to get this script to work on the "pacific" theme?I'm trying to implement this on my site - but i'm just not having any luck getting the search bar to show up in the navigation :/

Perhaps @silvabokis - you would know? :) would greatly appreciate some help