Does Version 7.1 support a Search Bar/Icon for the site's header?

Joseph21 · August 5, 2020

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!

DPruitt · August 6, 2020

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.

Joseph21 · August 24, 2020

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!

FrankVictor · September 3, 2020

DPruitt: Thanks for that helpful bit of code. I successfully used it, but noticed on mobile it's defaulting to the link icon. Is there any additional thing to include in order to have it appear as the favicon?

tiagocristovao · October 15, 2020

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

DPruitt · October 21, 2020

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*

Bobblehead · March 1, 2021

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 March 1, 2021 by Bobblehead

spongebob-smc · March 1, 2021

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.

tuanphan · March 5, 2021

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

kmdesign · March 7, 2021

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!

tuanphan · March 7, 2021

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

kmdesign · March 7, 2021

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.

Bobblehead · March 8, 2021

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.

tuanphan · March 8, 2021

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.

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

Bobblehead · March 8, 2021

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!

kmdesign · March 8, 2021

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.

KDV · March 10, 2021

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!

tuanphan · March 12, 2021

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?

KDV · March 12, 2021

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

KDV · March 20, 2021

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?

ElizabethM · March 23, 2021

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

tuanphan · March 28, 2021

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

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

ElizabethM · April 8, 2021

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

tuanphan · April 10, 2021

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

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

ElizabethM · April 10, 2021

@tuanphan of course

https://racontemoi.squarespace.com

password : MRCbst2020

Does Version 7.1 support a Search Bar/Icon for the site's header?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Healsjnr

Meeeee

justsayin

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources