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

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

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
  • 5 months later...
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>

image.thumb.png.2adf47b85085ab75314fef2c7737275a.png

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

To reiterate what has been documented elsewhere, Squarespace have not added a Search option to the 7.1 header because search does not work correctly on Squarespace 7.1. You can use code to add a search option, but you won't be able to fix the broken internal search engine.

To lobby Squarespace to fix this, you'll need to contact Squarespace Customer Care to log your concern. They don't follow posts in the forum (see guideline 6).

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

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

Edited by GraemeArmstrong
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...