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

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? 

Share this post


Link to post

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. 

Share this post


Link to post

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. 

Share this post


Link to post

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.

Share this post


Link to post

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.  

Share this post


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

Share this post


Link to post

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.

Share this post


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

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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

Share this post


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

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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.

Share this post


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

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


×
×
  • Create New...