Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
Tononcelli

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

Question

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

Edited by Tononcelli

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 1

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.


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
  • 2

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


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

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




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

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

Share this post


Link to post
  • 0

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.


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
Guest

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.

Share this post


Link to post
  • 0

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

Edited by BardurM

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

Sign in to follow this  

×
×
  • Create New...