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

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

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

 

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

 

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

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

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

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

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

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

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

Create an account or sign in to comment

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

×
×
  • Create New...