Jump to content

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

Recommended Posts

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
 

Header Search Icon.JPG

Edited by Junipurr
Link to comment

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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!

Link to comment
  • 1 year later...
12 minutes ago, cyborg1234 said:

I am also looking to [add a search icon]

As I pointed out heresearch 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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.