Jump to content

Adding a search lens to your site navigation {tutorial}

Recommended Posts

Hello Guys,

I have seen a lot of posts on this subject, today I will show you how to add a search lens in the navigation bar (in the header) in Squarespace 7 using the tutorial made by the Squarespace Guru for Squarespace 6, that you can find here

This is how it looks like:

alt text

You will need to follow these steps:

1) Retrieve the search address for your Squarespace site, every Squarespace site has one.

• If you have a custom domain it will be as follows: www.yourdomain.com/search

• If you do not have a custom domain linked to your site, it will be as follows: www.yourusername.squarespace.com/search

2) Add in the Code Injection, in the header section the following code in Settings >> Advanced >> Code Injection >> Header:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

This video shows you how to do it:

3) Add a link under the main navigation and name it the following:

<i class=" fa fa-search"></i>

Here is the video that shows you how to do it in Squarespace 7:

As a note, it might take a few minutes for the lens icon to display.

SOURCE: Squarespace Guru

Sell crazy some place else, we are all stocked up here

Link to comment
  • 3 months later...
  • Replies 11
  • Views 10.8k
  • Created
  • Last Reply
  • 1 month later...
  • 3 months later...
  • 4 months later...

Hi this also used to work for me but now it doesn't on one site - applegoss.com

The link to search is there if you put the mouse over it but there is no icon ?

On my other site droversinsideandout.com.au - it works fine.

Can anyone help ?

Link to comment
  • 2 months later...
  • 3 weeks later...
  • 2 months later...
  • 6 months later...
  • 8 months later...
  • 1 year later...
  • 3 weeks later...


This topic is now archived and is closed to further replies.

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