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

I read that some templates on Squarespace don't support a Search bar/icon for the site's header. I wonder if this is true for Version 7.1 also, which has the same template to support all features. 

I want to add one search icon with a bar to the header of my site, preferably next to the social icons. But I don't see this option available in the header's settings. Can anyone help? 

From everything I've read it looks like the move to 7.1 (and removal of specific templates in favour of design styles) means header search is now gone. Same story with the Sidebar. Both features no longer seem to be supported which is super disappointing. 

The irony is that the Squarespace's own sites use both of these features (header search and sidebar) heavily.

They are great features, please bring them back. 

Thank you so much for your response, much appreciated. 

KARAN

Also, the search feature can only find blog posts... not text blocks in any section. Since my site is not a blog, it means pretty much ALL of my content does NOT show up in search result. Apparently this is a known bug (according to support), and they are "working on it"... and have been since the launch of 7.1

I find it pretty terrible that they broke the search feature in 7.1 and STILL haven't fixed, let alone that they have launched 7.1 with a broken search feature. 

Even more disappointingly, in 7.0, you could add Font Awesome Icons to navigations using Link items. See this search icon which uses this code:

<i class="fas fa-search"></i>

I've used that method several times to link from the nav or footer to the /search page on a site.

In 7.1, it appears that code is now disabled in navigation items altogether, meaning you can't do a lot of things—not even make a nav item bold or italics.

That may seem like a small thing but being able to insert code into a nav item (and many other places in SQS) was super useful. A real digression in features.

Did anyone find a solution to this search icon feature?  plugin maybe?  It's pretty important, and I can't believe that mid-enterprise sort of ecommerce companies wouldn't have it.  And frankly it's pretty standard across every other single website.  

Add link item to Header, then use CSS to make link text to search icon ✌️

On 5/16/2020 at 4:39 PM, tuanphan said:

Add link item to Header, then use CSS to make link text to search icon ✌️

@tuanphan Can you expand upon this? What custom CSS would turn the link text into an icon? I understand how to do this in 7.0 using code injection, but that feature has been removed in 7.1 (which is exceptionally aggravating).

I don't personally need to use a search icon in my header, but I do need to use a socials icon (Instagram), as the default way of doing this in 7.1 (Header > Element > Social Links) puts the icon way outside of where it needs to be, and isn't adjustable.

You can put a link on a 7.1 header/nav bar with the site url  followed by a search key, for  example 

https://mydomain.com/search or my own site: https://myrandomviews.com/search

Sure, but that doesn't solve the problem of how to get an icon into the nav bar like you used to be able to do with 7.0 and Font Awesome.

7 hours ago, Mothfood said:

Sure, but that doesn't solve the problem of how to get an icon into the nav bar like you used to be able to do with 7.0 and Font Awesome.

12 hours ago, Mothfood said:

@tuanphan Can you expand upon this? What custom CSS would turn the link text into an icon? I understand how to do this in 7.0 using code injection, but that feature has been removed in 7.1 (which is exceptionally aggravating).

I don't personally need to use a search icon in my header, but I do need to use a socials icon (Instagram), as the default way of doing this in 7.1 (Header > Element > Social Links) puts the icon way outside of where it needs to be, and isn't adjustable.

If your plan is Business or higher, you can use FontAwesome.

First add this line to Code Injection Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Next, add Link item to Navigation with name: Search, then share me url, I will give the code to change search text to search icon.

The URL is currently a placeholder as we work on rebuilding/porting over from a different website builder. Not sure if that will make a difference down the road. For my purposes, I'll be using an Instagram icon rather than a search icon/function, so I've named the Link page in Main Navigation "Social" rather than "Search".

11 hours ago, Mothfood said:

The URL is currently a placeholder as we work on rebuilding/porting over from a different website builder. Not sure if that will make a difference down the road. For my purposes, I'll be using an Instagram icon rather than a search icon/function, so I've named the Link page in Main Navigation "Social" rather than "Search".

Your site is private.

My bad. PW is painfully.

18 hours ago, Mothfood said:

My bad. PW is painfully.

painfully. is incorrect

Add to Home > Design > Custom CSS

header#header [href*="instagram"] {
    visibility: hidden;
}
header#header [href*="instagram"]:before {
    content: "\f16d";
    font-family: FontAwesome;
    padding-right: 5px;
    visibility: visible;
}

Thanks, @tuanphan, that code worked. Unfortunately the way the icon appears in line with the other Page titles on the site is a little awkward. It being so small in juxtaposition with full words throws the spacing off, so I may just leave it as "Social", but I appreciate the opportunity to compare them.

I just found this and implemented it on my site.

On 5/26/2020 at 7:20 PM, derricksrandomviews said:

You can put a link on a 7.1 header/nav bar with the site url  followed by a search key, for  example 

https://mydomain.com/search or my own site: https://myrandomviews.com/search

Would it be possible to do something like this but have it pop up as a lightbox when the link is clicked, rather than bring you to a new page specifically for the search?

Not that I am aware of, but that doesn't mean it can't be done. 

@Jahhhd The video you shared really works. Thanks.

Do we have any update from SS on when Search feature will be enabled? If not, then can someone help me? I am not a programmer so not sure how to implement the steps given in the video.

Why does Squarespace get so many things right and SO many things wrong?  Who's driving this ship??  Seriously NO search?  WTF???

I also love how they let us fend for ourselves in these rabbit hole chat rooms and no real team response ever takes place.

And still search in 7.1 does not work (it only indexes blog posts, no other content)... 😞

Anyone using Font Awesome wanting the search icon within the DIV Social Icon Wrapper of the header, here you go:

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:

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

5. Add your 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:lightgray;
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}

.header-menu-actions-action.header-menu-actions-action--social:first-child:after {content: '\f002'; 
font-family: FontAwesome;
display: inline-block;
  position: absolute;
margin-left:-15px;
  margin-top: -25px;
font-size: 22px;
color:#0db14b;
visibility:visible}


/*END Custom Search Bar*/

If you're wanting to have it within the navigation instead of the social links, just write your CSS accordingly and leave out the nasty javascript.