Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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? 

Link to post
  • Replies 30
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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 lo

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 p

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 t

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. 

Link to post
  • 1 month later...

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. 

Link to post
  • 1 month later...

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.

Link to post
  • 2 weeks later...
  • 1 month later...
  • 2 weeks later...
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.

Link to post
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

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

Link to post
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

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.

Link to post
  • 4 weeks later...
  • 3 weeks later...

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.

Link to post
  • 2 weeks later...

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.

Edited by DPruitt
Code Additions
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...