Add global search icon (magnifying glass only) to main navigation

Site URL: https://guitar-dragonfly-4xlh.squarespace.com/

Hi SQSP Gurus and Veterans! 

I’d like to add a global search icon to my main navigation but use just a magnifying glass (not the full search bar/box). 

I’ve looked high and low for a tutorial here on the forum, Youtube, and Google, but the closest instructions I could find are (1) how to add the full search bar to the main navigation, and (2) how to create a separate search page. The UX I’m going for is similar to this site (annotated screenshot also attached): https://cupofjo.com/

Could you please help me with code for adding just a search magnifying glass to the header? 

Thank you for your time!
Junipurr
 

Could you add the current search box of your template and we can see if it can be change to glass? What is your template using?

Hi @bangank36 thank you for your time and willingness to help! 

Add current search box - Sure! I added a search block in the footer of my site, directly under the logo

Template - I'm using 7.1's Ventura, I believe.

Thank you again!

7 minutes ago, Junipurr said:

Hi @bangank36 thank you for your time and willingness to help! 

Add current search box - Sure! I added a search block in the footer of my site, directly under the logo

Template - I'm using 7.1's Ventura, I believe.

Thank you again!

the template you used can't add search icon on navigation right?

Hi @bangank36, yes, this template does not allow adding search icon to the main navigation, but I found a way to do it with code by following this tutorial: https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71 

8 minutes ago, Junipurr said:

Hi @bangank36, yes, this template does not allow adding search icon to the main navigation, but I found a way to do it with code by following this tutorial: https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71 

Have you try it?

Yes, I already tried that tutorial. The problem is that it moves the entire search box/bar to the main navigation, whereas I only want the magnifying glass. 

Hi @bangank36! Sorry for pestering, but would you be able to advise or point me in the right direction? I have already tried the tutorial I linked to, but the problem is that I only want the magnifying glass in my main navigation (not the entire search box, which overcrowds my main navigation, especially as I already have a rectangular button for newsletter). Thank you!

I am also looking to achieve this, my URL is https://pear-beige-sfbj.squarespace.com/, PW: cyborgsoloists

Please can someone advise how I can achieve this?
Thanks

12 minutes ago, cyborg1234 said:

I am also looking to [add a search icon]

As I pointed out here, search does not work correctly on Squarespace 7.1. and hasn't done for 21+ months. This is why Squarespace did not include a Search option in the 7.1 header. You can use code to add a search option, but you won't be able to fix the broken search service.

To lobby Squarespace to fix this, you'll need to contact Squarespace Customer Care to log your concern.