Does Version 7.1 support a Search Bar/Icon for the site's header?

On 4/10/2021 at 10:09 PM, ElizabethM said:

@tuanphan of course 

https://racontemoi.squarespace.com

password : MRCbst2020

Hi. Do you still need help on this? I don't see search icon on header

Thanks for this code.  How do I get the icon to appear in the mobile menu?

21 hours ago, GraemeArmstrong said:

Thanks for this code.  How do I get the icon to appear in the mobile menu?

What is your site url?

www.khuramanarmstrong.com

On 10/15/2021 at 7:51 AM, GraemeArmstrong said:

www.khuramanarmstrong.com

Hi,

You mean make search icon appear next to burger on mobile?

Yes thanks

On 10/17/2021 at 5:10 PM, GraemeArmstrong said:

Yes thanks

Click on Search >> redirect to search page. Is this right?

Or click on Search >> Show Search Input>

Click on Search >> redirect to search page.

On 10/21/2021 at 8:23 AM, GraemeArmstrong said:

Click on Search >> redirect to search page.

Add to Settings > Advanced > Code Injection > Footer

<script>
$(document).ready(function() { 
		$('<a href="/search" class="header-search"></a>').appendTo('.header-display-mobile .header-actions-action.header-actions-action--social');
	});
</script>
<style>
  .header-display-mobile .header-actions-action.header-actions-action--social {
    display: block !important;
}
  a.header-search {
    width: 30px;
    height: 30px;
    display: block;
    background-image: url(https://assets.squarespace.com/universal/images-v6/icons/icon-searchqueries-32-dark.png);
    margin-right: 10px;
}

</style>

Thanks to @tuanphan and @DPruitt I achieved the Search Icon result I wanted in Desktop and Mobile following these instructions and using the code below.  Thanks guys.

www.khuramanarmstrong.com

Font Awesome search icon within the DIV Social Icon Wrapper of the header
1. First enable your social links in your header.
2. Add a Link to the beginning of your Social Link List https://www.yourdomain.com/search
3. Add your Font Awesome Script to your Header Injection.
4. Include this Javascript within the Header to make the first link open in the same window:

Code Injection > Header
<script src="https://kit.fontawesome.com/[yourID].js" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
        $('.header-actions-action--social a:first-child[target="_blank"]').prop("target", "_self");
   $('.header-menu-actions-action--social a:first-child[target="_blank"]').prop("target", "_self");
      });
</script>

CSS
/*Custom Search Bar*/
.header-actions--right .header-actions-action--social .icon:first-child
{visibility:hidden}

.header-actions--right .header-actions-action--social .icon:first-child:after {
content: '\f002'; 
font-family: FontAwesome;
  position: absolute;
margin-left:-1vw;
  margin-top: 3px;
font-size: 15px;
color:#5F5F5F;
visibility:visible}

.sqs-svg-icon--list a:first-child
{display:none}

/*Mobile*/
.header-menu-actions-action.header-menu-actions-action--social:first-child {
    visibility: hidden;
    position: relative;
    margin: 0 !important;
}
.header-menu-actions-action.header-menu-actions-action--social:first-child a:after {
    content: '\f002';
    font-family: FontAwesome;
    display: block;
    position: absolute;
    bottom: -2px;
    right: 4px;
    font-size: 22px;
    color: #5F5F5F;
    visibility: visible;
    z-index: 10000;
    padding: 5px;
}

/*END Custom Search Bar*/

I successfully implemented search into my client's header only to discover that search function is broken in 7.1. I contacted support and they basically told me "We know that search is broken and don't care about fixing this feature because not enough people use it." Why not just remove it, then? Why leave a broken feature on your platform? Squarespace isn't exactly a startup with no time or money to spare. I give them thousands of dollars every year from 15+ clients. It's so frustrating to get this response.

--

Hi there,
 
This is Ryan from the Portland office, I am following up from our chat earlier.
 
Thank you for your patience while I looked in to this more. I understand that the search function on your site was not working as expected. Specifically, the search block was not returning indexed content as it should. 
 
When it comes to resolving platform issues, we can't fix every problem, so we have to choose the most impactful improvements. We prioritize platform developments and critical issues that affect a large number of customers or greatly reduce the usability of the platform.

While we understand it may be inconvenient, we don’t currently have plans to fix or improve this behavior.
 
I hope the information above is helpful. If you have any additional questions please don’t hesitate to reach out. We are here 24/7 and are always happy to help!
 
Thanks,

Site URL: https://www.countiesenergy.co.nz

Hi there,

I have inherited a Squarespace website and need help with our search function.

My client would like to add our search icon into the top right of the mobile header but the Squarespace feature that offers that does not appear to be helping.

I'm also looking to edit the search function but can't figure out how to do so. This is the search page https://www.countiesenergy.co.nz/search/ but I can't see how to edit it.

Any help would be much appreciated.

Thank you!

Sam

10 hours ago, broadbelt said:

My client would like to add our search icon into the top right of the mobile header

See this post.