Adding a search lens to your site navigation {tutorial}

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:

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

I used the code on the website www.ellisellis.com.

It used to work but now it doesn’t. Do you have any idea why?

/Mia

I went on your site and it is working for me :)

Awesome! Thanks!

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 ?

I'm having the same problem but only in Safari. In Chrome, Firefox and IE it works fine. Anyone have an idea why?

I'm having the same issue. The link is still there but the lens icon isn't showing (top right after "ABOUT"). I just noticed this today. Tried on both Safari and Chrome. My site is whitecoatmoney.com

Hi istevieb, did you ever find a solution to this problem?

Can someone please help with the positioning of this search lens link to separate it from the rest of the navigation menu. I'd like it to the left side of the navigation bar and the main navigation centered (as is) and the social links to the right (as is).

TIA

Worked like magic with the avenue template. Thanks!

Does anyone know if it it possible to change its color? Mine is red now

Worked like magic for me as well! I couldn't figure out step 3 for a minute but then watching the video realized you had to use "" as the NAME for the link and then link to your own search site. Thanks for this tutorial!