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

1 hour ago, DPruitt said:

Anyone using Font Awesome, 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. 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}

/*END Custom Search Bar*/

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

Thank you very much for sharing this. It works! 

Do you know how I can have the search open in the same browser tab? Right now when I click on the search bar icon a new tab opens up on my browser.

Thank you!

Link to post
  • Replies 50
  • 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

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

Posted Images

On 8/5/2020 at 12:47 AM, Joseph21 said:

Thank you very much for sharing this. It works! 

Do you know how I can have the search open in the same browser tab? Right now when I click on the search bar icon a new tab opens up on my browser.

Thank you!

-The Process is now updated with Javascript to accomplish same window functionality for the first social link within the header.

Link to post
  • 3 weeks later...
On 8/6/2020 at 1:50 PM, DPruitt said:

-The Process is now updated with Javascript to accomplish same window functionality for the first social link within the header.

Thank you so much!

Link to post
  • 2 weeks later...
  • 1 month later...
On 8/5/2020 at 4:55 AM, DPruitt said:

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");
      });
</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}

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

Hi DPruitt,

Thanks a lot for sharing this resolution, it works fine!

At the mobile header the icon doens't change, do you know how to solve it?

 

Thanks again for your time,

Tiago

Link to post
On 9/3/2020 at 3:01 PM, FrankVictor said:

additional

 

On 10/15/2020 at 11:06 AM, tiagocristovao said:

Hi DPruitt,

Thanks a lot for sharing this resolution, it works fine!

At the mobile header the icon doens't change, do you know how to solve it?

 

Thanks again for your time,

Tiago

-------------
Code is now updated for mobile*

Link to post
  • 4 months later...
On 10/20/2020 at 9:49 PM, DPruitt said:

 

-------------
Code is now updated for mobile*

Many thanks for this solution; the desktop version works great.

I've tried the updated code for mobile, but it does not work correctly. Specifically, the icon does display properly, but I can't actually click it. I've tested this on a resized desktop window as well as an actual mobile device.

Edited by Bobblehead
Link to post
8 minutes ago, Bobblehead said:

Many thanks for this solution; the desktop versions works great.

I've tried the updated code for mobile, but it does not work correctly. Specifically, the icon does display properly, but I can't actually click it. I've tested this on a resized desktop window as well as an actual mobile device.

I'm having the exact same problem. 

Link to post
On 3/2/2021 at 1:25 AM, Bobblehead said:

Many thanks for this solution; the desktop version works great.

I've tried the updated code for mobile, but it does not work correctly. Specifically, the icon does display properly, but I can't actually click it. I've tested this on a resized desktop window as well as an actual mobile device.

 

On 3/2/2021 at 1:34 AM, spongebob-smc said:

I'm having the exact same problem. 

Can you share link to your site? We can check easier

Link to post
On 10/20/2020 at 9:49 PM, DPruitt said:

 

-------------
Code is now updated for mobile*

Is there code to place the search icon for mobile on the navigation menu?  

I'm also hoping I can change Login and the Shopping Cart to font awesome icons so that it all matches. 

I'm kinda shocked that SquareSpace 7.1 makes it so difficult to have something as simple as search in the main navigation, but I can use any help I can get.  Thanks! 

Link to post
1 hour ago, kmdesign said:

Is there code to place the search icon for mobile on the navigation menu?  

I'm also hoping I can change Login and the Shopping Cart to font awesome icons so that it all matches. 

I'm kinda shocked that SquareSpace 7.1 makes it so difficult to have something as simple as search in the main navigation, but I can use any help I can get.  Thanks! 

First, add this line to Code Injection Header

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">

Next, share link to your site, we will give the code to add Fontawesome icons

Link to post
7 hours ago, tuanphan said:

First, add this line to Code Injection Header


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">

Next, share link to your site, we will give the code to add Fontawesome icons

Thanks for your help! 

I went ahead and added that code to header.  I had already had the site's owner request the script from font awesome and followed the other steps on this thread.  The site isn't published yet, so I'm not able to test the search link.

What I'm trying to do now is -

1) since the code for the search icon changed the instagram icon to a "link" icon - is manually add social media to the footer (and not include on navigation bar).   

2) replace the cart icon, (I may be able to  change from hairline to regular) and replace the word "login" with a user icon, which I want to match with the search icon.

3) in mobile, the search icon shows up on the menu, I was able to move it around on menu, but still cannot test that it works.  Ideally, I want the search icon on the nav bar in mobile so that the user can search from any screen they are on.  

Attaching screenshots 

Thank you again.

 

Screen Shot 2021-03-07 at 10.00.13 AM.png

Screen Shot 2021-03-07 at 10.00.31 AM.png

Screen Shot 2021-03-07 at 10.00.24 AM.png

Link to post

 

20 hours ago, tuanphan said:

First, add this line to Code Injection Header


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">

Next, share link to your site, we will give the code to add Fontawesome icons

My client's site is https://www.thebluehousebethesda.com/

I did not, however, add the line of code above, as I already had all portions of @DPruitt's code applied.

Link to post
17 hours ago, kmdesign said:

Thanks for your help! 

I went ahead and added that code to header.  I had already had the site's owner request the script from font awesome and followed the other steps on this thread.  The site isn't published yet, so I'm not able to test the search link.

What I'm trying to do now is -

1) since the code for the search icon changed the instagram icon to a "link" icon - is manually add social media to the footer (and not include on navigation bar).   

2) replace the cart icon, (I may be able to  change from hairline to regular) and replace the word "login" with a user icon, which I want to match with the search icon.

3) in mobile, the search icon shows up on the menu, I was able to move it around on menu, but still cannot test that it works.  Ideally, I want the search icon on the nav bar in mobile so that the user can search from any screen they are on.  

Attaching screenshots 

Thank you again.

 

Screen Shot 2021-03-07 at 10.00.13 AM.png

Screen Shot 2021-03-07 at 10.00.31 AM.png

Screen Shot 2021-03-07 at 10.00.24 AM.png

Hi. Difficult to help without checking url. It also means I will have to create a trial site, create a header like yours, and test the code there.

 

4 hours ago, Bobblehead said:

 

My client's site is https://www.thebluehousebethesda.com/

I did not, however, add the line of code above, as I already had all portions of @DPruitt's code applied.

You used :after for icon container, you should use for link tag. The code should be

.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: #686868;
    visibility: visible;
    z-index: 10000;
    padding: 5px;
}

 

Link to post
6 hours ago, tuanphan said:

You used :after for icon container, you should use for link tag. The code should be


.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: #686868;
    visibility: visible;
    z-index: 10000;
    padding: 5px;
}

 

That did the trick. Thank you so much for your help!

Link to post
13 hours ago, tuanphan said:

Hi. Difficult to help without checking url. It also means I will have to create a trial site, create a header like yours, and test the code there.

 

You used :after for icon container, you should use for link tag. The code should be


.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: #686868;
    visibility: visible;
    z-index: 10000;
    padding: 5px;
}

 

Thank you both for this. 

Link to post

Hi guys, do you mind to have a look why its not working when i implemented everything as was said in this topic? 🙂

Seach icon is working on web, but not on mobile phones, not sure what else to do....

http://nutri-drops.co.uk/

Password: Nutridrops

Appreciate any help!

Link to post
On 3/11/2021 at 6:07 AM, KDV said:

Hi guys, do you mind to have a look why its not working when i implemented everything as was said in this topic? 🙂

Seach icon is working on web, but not on mobile phones, not sure what else to do....

http://nutri-drops.co.uk/

Password: Nutridrops

Appreciate any help!

I see mobile search icon here. Did you solve problem?

Link to post

@tuanphan yes, its shown there but when clicked it doesnt open search bar as it does on desktop version. Any idea why it doesnt happen? 

 

This is CSS added code :


/*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:-3vw;

  margin-top: 0px;
font-size: 22px;
color: #B7A37B;
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:-0px;
  margin-top: -26px;
font-size: 22px;
color:#B7A37B;
visibility:visible}


/*END Custom Search Bar*/

 

Link to post
On 3/12/2021 at 9:47 AM, tuanphan said:

I see mobile search icon here. Did you solve problem?

Would you mind to have a look at it to check why the icon is not responding when clicked?

Link to post

Hi 

I am having trouble with the search bar too. 

I would like to

- only have the search icon - not all the text bar search

- search icons on the right next to the shopping cart 

- responsive search + shopping cart for mobile phone. 

Cf image linked - what I have - in white - what I would like

 

website link : https://racontemoi.squarespace.com

pasword : MRCbst2020

 

Thank for your help

296407379_Capturedcran2021-03-2310_29_47.png.fb2e87310c85439ade88fc49712a5636.png

Capture d’écran 2021-03-23 à 10.32.15.png

Capture d’écran 2021-03-23 à 10.34.39.png

Link to post
On 3/20/2021 at 11:59 PM, KDV said:

Would you mind to have a look at it to check why the icon is not responding when clicked?

Sorry for the delay. Do you still need help?

On 3/23/2021 at 4:36 PM, ElizabethM said:

Hi 

I am having trouble with the search bar too. 

I would like to

- only have the search icon - not all the text bar search

- search icons on the right next to the shopping cart 

- responsive search + shopping cart for mobile phone. 

Cf image linked - what I have - in white - what I would like

 

website link : https://racontemoi.squarespace.com

pasword : MRCbst2020

 

Thank for your help

296407379_Capturedcran2021-03-2310_29_47.png.fb2e87310c85439ade88fc49712a5636.png

Capture d’écran 2021-03-23 à 10.32.15.png

Capture d’écran 2021-03-23 à 10.34.39.png

Try this guide. https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71

Link to post
  • 2 weeks later...

Hi everyone

I would like to know how to modify the search icon. 

I've had a search bar on my header but it's blurred. Anyone could help me to fix this ? 

I've already have some custom CSS for the header as the search bar is located on the footer. 
Can someone knows how we can make this work  ?

 

Thank you 

 

Capture d’écran 2021-04-08 à 21.28.50.png

Link to post
On 4/9/2021 at 2:29 AM, ElizabethM said:

Hi everyone

I would like to know how to modify the search icon. 

I've had a search bar on my header but it's blurred. Anyone could help me to fix this ? 

I've already have some custom CSS for the header as the search bar is located on the footer. 
Can someone knows how we can make this work  ?

 

Thank you 

 

Capture d’écran 2021-04-08 à 21.28.50.png

Hi. Can you share link to your site? We can check easier

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