Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 14
  • Created
  • Last Reply

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.

Link to comment

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.

Link to comment
  • 1 month later...

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

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment

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



If you're looking for a Squarespace Developer, drop me a line. 

Link to comment
  • 6 months later...

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.

Link to comment
  • 5 months later...
  • 5 months later...

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.