Jump to content

Search bar in header

Recommended Posts

Hello

I am trying to implement a search bar in the header, but am unsure if there's any way to do that?

The site in question is: www.metharc.com

I've tried the Will Myers code, with no luck. I wonder if it's due to too little space left in the header?

Any help is much appreciated.

P.S.: The site has a search icon atm, but not an acutal search bar where you can type directly into the header.

Edited by olegraugaard
Forgot hyperlink
Link to comment

I code this some days, but it has a lot of problem. You can consider this approach

  • Search icon on Header
  • Click Search icon >> Show a search bar under header

If you agree this, we can give the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
8 hours ago, tuanphan said:

I code this some days, but it has a lot of problem. You can consider this approach

  • Search icon on Header
  • Click Search icon >> Show a search bar under header

If you agree this, we can give the code

 

Hi Tuanphan

That sounds like a good solution, would love the code - thnx!

Best

Link to comment
On 2/26/2023 at 1:18 AM, olegraugaard said:

 

Hi Tuanphan

That sounds like a good solution, would love the code - thnx!

Best

Hi,

I just found this guide. You can try first

https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi Tuanphan

Thanks, but I already tried this, and unfortunately it does not work.

1) It positions wrongly and 2) it doesn't allow me to type anything.

Perhaps there's not enough space for it in the header...?

See screenshot (the search field in right corner is from the WM code - the current solution, a search icon in the middle, links to the search page - but this solution is not optimal...) 

Skærmbillede 2023-03-04 132406.png

Link to comment
On 2/20/2023 at 8:17 AM, olegraugaard said:

I am trying to implement a search bar in the header, but am unsure if there's any way to do that?

The built-in search tool is unreliable on Squarespace 7.1 (see Search is broken in 7.1).

For this reason, you won't find a search bar or search icon in any of the Squarespace 7.1 templates. Until the search tool has been fixed, I do not recommend that you try to add a search option as visitors are likely to rely on the results and, if no results are found, will leave your site.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 1 month later...
  • 2 weeks later...
On 3/4/2023 at 7:35 AM, paul2009 said:

The built-in search tool is unreliable on Squarespace 7.1 (see Search is broken in 7.1).

For this reason, you won't find a search bar or search icon in any of the Squarespace 7.1 templates. Until the search tool has been fixed, I do not recommend that you try to add a search option as visitors are likely to rely on the results and, if no results are found, will leave your site.

Did this help? Please give feedback by clicking an icon below  ⬇️

New (and generally enthusiastic) Squarespace user here. This is admittedly quite disappointing. I've viewed search as such a basic function for any website for decades now that the thought never occurred to me to verify that Squarespace offered a functional, flexible, and versatile version. 

Link to comment
  • 1 month later...

Just adding to the thread since this is an ongoing issue. I was able to make Will Myer's code work BUT the search bar was case-sensitive so if the user doesn't use capitalization that exactly matches how the words appear on the website pages, the search result returns a "not found" message. I tried the Google Programmable Search Engine that another user shared in a related forum and had the same case-sensitive issue there. Anyone else run into that?

Link to comment
On 6/14/2023 at 11:08 AM, SallyOutdoors said:

Just adding to the thread since this is an ongoing issue. I was able to make Will Myer's code work BUT the search bar was case-sensitive so if the user doesn't use capitalization that exactly matches how the words appear on the website pages, the search result returns a "not found" message. I tried the Google Programmable Search Engine that another user shared in a related forum and had the same case-sensitive issue there. Anyone else run into that?

What is your site url? We can check problem easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.