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 comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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 comment
  • 4 weeks later...
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?

Link to comment
  • 3 weeks later...
  • 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 comment

Create an account or sign in to comment

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

×
×
  • Create New...