Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

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:

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

Edited by wklz

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

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 1

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 post
  • 0

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

Edited by WhiteCoatMoney
Link to post
  • 0

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


Link to post
  • 0

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!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...