No video :(

Adding a Search Bar To The Header in Squarespace 7.1

Подписаться 4,5 тыс.

Просмотров 28 тыс.

50% 1

CODE HERE: www.will-myers.com/articles/a...
NEWSLETTER SIGNUP: will-myers.com/newsletter
==========
Enhance your website - Shop the Plugin Store
www.will-myers.com/products
Grow Your Skillset - Learn CSS for Squarespace Course
www.will-myers.com/learn-css-...
==========
QUESTION:
Just wondered if you know a way to get a search bar/icon into the main header navigation? Squarespace 7.0 used to have this option in styles, but there is no option in 7.1 - Do you think this can be coded?
-Michael
QUICK STEPS:
1. Add a Search bar to the footer
2. Paste in the jQuery code to your Settings » Advanced » Code Injection » Page Header Code Injection area
3. Find the Block ID of your Search Bar and paste it into the Page Header Code Injection Area
4. Paste in the CSS to your custom CSS area

Опубликовано:

3 июн 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 86

@abi-at-WillMyersSupport 2 года назад

Hi all, in an effort to provide quicker responses to your comments, we need to update this channel to a “Brand” account. Unfortunately this means any previous comments left by Will are going to be deleted.

@junipurrstudio1052 3 года назад

As someone who does not know a word of code, following this tutorial step by step and seeing it work felt like magic! Empowering magic! Thank you, Will!

@jamesdelin1127 3 года назад

Will - you're awesome! Such a helpful thing to do! Thank you so much!

@DrRobust 2 года назад

Thanks mate your tutorial is fantastic. I thank you for being straight forward and not wasting my time trying to hit 10 minutes

@yulimaru 3 года назад

Thank you! This was so helpful. A lifesaver, really.

@KERlizabeth 3 года назад

Thanks so much for this! You made this so easy. It's definitely an important feature missing from 7.1.

@miami1000111 2 года назад

A RU-vid VIDEO THAT ACTUALLY HELPED!!!!!! Please never stop what you are doing

@parentsguidetovideogames1164 3 года назад

I'm a complete and utter noob when it comes to websites and coding, but this was so easy to follow, thank you so much for providing the information in an easy to understand way, really appreciate it :)

@rewatikulkarni7265 3 года назад

You are a lifesaver. This worked perfectly, thank you so much!

@TheCanvasse 9 месяцев назад

Thank you for this! I would love to see an updated one since 7.1 has changed a bit, and the directions for finding my Search Block ID weren't working, so I had to play around with it. But I got it to work, and I'm so happy! Thanks for the walkthrough.

@abi-at-WillMyersSupport 8 месяцев назад

Hey, thanks for the feedback, we'll keep this in mind!

@mariaisabellewarren8359 3 года назад

You're amazing! Most of the codes from my site are from you!! THANK YOU SO MUCH!

@chou-4737fjswi 3 года назад

god bless u bro the best tutorial ive found thus far

@natalieperez9074 3 года назад

you don't understand how much this helped me!!! thank you!!! bless!!!

@TheLittleCarnivore 3 года назад

Great tutorial! Thank you

@hourglassrewrite 11 месяцев назад

Update in September 2023, this video still works! ONLY tip is: All code injection is now found at Settings -> Developer Tools -> Code Injection Upon exiting code injection is immediately a new list of options including "Custom CSS"

@abi-at-WillMyersSupport 11 месяцев назад

Good tip! Squarespace have recently adjusted all of their menu's.

@joantran 3 года назад

Thank you so much!!! So helpful :)

@KarenLopez-vj1fh 4 года назад

Thanks! this was super helpful

@user-jp6dc9xd8p 5 месяцев назад

Heck yea!!! Thank you! It took me a few tries but i got it!

@jimmytayjimmytay 4 года назад

Thanks dude, you solve my search bar issue! cheers!

@chanceinman 3 года назад

Hell yeah dude, thanks a ton!

@aegispopeellis 3 года назад

Thanks Will, sorted out a long-standing headache of mine in resolving this one, cheers L&Subed

@gareturban5 3 года назад

Thank you King

@MichaelFDAnaya 2 года назад

Epic! Thank you!

@jimcano3998 2 года назад

thanks for this!

@balashi05 2 года назад

OMG thank you. I was a bit flustered that when I maximized my window, the search bar got smaller, to the point it was only the magnifying glass and you couldn't see the letters you were typing. That was when the site header was organized to be LOGO - MENU - SEARCH - SOCIAL ICONS, with the menu right adjusted to the icons (i suppose the search bar, which was placed to the left of the social icons, was trying to squeeze itself there). Same thing happened when I left-aligned the menu items to the logo. Then it stopped happening when I centered the menue items.. weird. but it works now. Thanks again!

@cocokatana 2 года назад

Thank you so much! This tutorial was very copy and paste for the coding noobs. However, I was grabbing the wrong block id at first. If the code isn't working but everything is pasted right, it's probably because you are grabbing the wrong block id. I looked for "sqs-block search-block" because it was what was highlighted in the video and it worked! TL;DR, Try all the codes around/ "within" the search bar, your block id may not be the "one below the next element."

@jqonbass 4 года назад

THANK YOU!!!!!!

@lersimoneau9267 2 года назад

Hi Will! Great tutorial, especially when in combination with how to place it in the header! My only question is can I change the amount of padding between the search bar and other elements in the header? (my nav titles become two lines of text with a whole lot of space next to them) Thanks!

@shalenawhite 3 года назад

Hi there, thanks for this! Do you know how to move the search bar so its underneath the header logo and navigation links? I was able to get the search bar to show up in the header but in each way I try pasting the code, it shifts my nav links around and the search bar sort of overlaps with the social icons. I would love your assistance with that. Thanks!

@villagepharmacy1479 2 года назад

Thank you! Great tutorial. One thing that tripped me up is I copied the whole block id code and not the section inside listed as "block id" when inspecting the search bar in footer. sharing in case it trips anyone else up. Thanks again!

@pangeaindigenousart1058 2 года назад

I placed all the codes into my squarespace but I still can't get the search bar to move to the header!! Please help!!! It's driving me crazy! I don't know why it's not working.

@AmandaNazzalCreative 3 года назад

Hey! So I'd still like a search bar to be in my footer also. Is there a way to make it so the bottom search will still appear?

@helixlacoste6945 3 года назад

The instructions a little confusing but thank you for the code! Got it working!

@alappatel2472 3 года назад

May I know this search bar its getting data from the whole website? or can I create a search for a specific page?

@Terran5992 3 года назад

Is it possible to add this to the header without code injection as that is a business account feature

@consgn2oblivion 2 года назад

This has been the most helpful (only helpful) tutorial I've found on placing it in the nav. However, it looks like the search is only searching titles on the website? Is there a way to by-pass this so that the search function searches body text as well? I know almost nothing of code and am stumped.

@karanverma8549 3 года назад

In built-in search of squarespace, i'm searching the heading of content. And it is not showing the results. It is only searching the pages of my site, not the content of the page (also the search specific page is also unchecked). How can it be achieved. It would be very appreciated if you can help.

@JGClarke95 3 года назад

I pasted the ID into code injection and page refreshed but search bar is still in the footer. Any idea why?

@triggeredmediaco 3 года назад

Is there a way to make this a global change? when I click on other pages on the site, it make the search box disappear.

@OmarFKuri 3 года назад

How do I add a code block? I've tried just using it's ID and nothing happens. #help

@emmettanderson5572 2 года назад

Thank you so much for this tutorial! My problem is that the search bar gets squished between navigation and social links so that you can't even see what you are typing in it. This only happens on desktop, mobile works perfectly. It also resizes erratically as you resize the page.

@annawilder8470 3 года назад

This doesn't work for* me and my client's website :/ She has Squarespace 7. How does that effect the end result?

@turbofunk_ 11 месяцев назад

Thank you so much for this tutorial! Is there a way to get rid of the "Search" text? Also, is there code to make the magnifying glass icon a responsive color based on the background? I know that's more complex but my site is yellow and black so white/black options don't work too well. Thanks!

@abi-at-WillMyersSupport 11 месяцев назад

Hey, this tutorial might be of more use to you - www.will-myers.com/articles/adding-a-search-icon-to-your-site-header

@aladdinshabanov5079 3 года назад

This is awesome! how can we adjust the positioning though? is that possible?

@aladdinshabanov5079 3 года назад

@@will-myers Works like magic. I cannot thank you enough!

@meagan.jeepgirl 2 года назад

I was able to get it on desktop - but it will NOT work on mobile view no mater what I do. . . HELP!

@dmzafran 2 года назад

I got the search bar to work but on iPhones for some reason when you click it it disappears and you can't see what you're typing in. It works fine on non-iPhones but I'm not sure how to fix it for iPhones.

@user-ph1pl7ny2t 11 месяцев назад

Hey Will, thank you for sharing this tutorial, I did follow it step by step but for some reason, it is not working. Am I missing a step?

@abi-at-WillMyersSupport 11 месяцев назад

Hey! Sorry to hear this isn't working for you. If you could reach out via the Support page on our website we can take a look for you.

@user-ld3bg9bv6c Год назад

Hello, how to change the design on CSS of the search bar ?

@abi-at-WillMyersSupport Год назад

Hey Florian, this tutorial doesn't cover styling of the search bar, only positioning it in the header.

@honestlyshelby7276 3 года назад

Hello, thank you for this! I've added a custom css to center the mobile search, but it isn't working. Will you help me please Will? @media screen and (max-width:767px) { div.nested-category-tree-wrapper ul { -ms-flex-wrap: wrap; flex-wrap: wrap; }

@honestlyshelby7276 3 года назад

I just figured it out. I simply played around with the padding until I saw it centered. .mobile-header-search-bar{ background-color: transparent; display:block; padding-left:33vw; padding-right:3vw; }

@Daniel-ry5tz 4 года назад

Any code to make the bar an icon that when clicked, turns into a search bar? Thank you!

@jamesonlucasiv3327 4 года назад

I second this request!

@andreamerrill4107 4 года назад

Yes, I would love to see this! I have been trying with fontawesome but its not working

@lilyolsberg4000 4 года назад

@willmeyers would also love to see this!

@KERlizabeth 3 года назад

Yeah that would be even more amazing for sure!

@baki3626 3 года назад

How do i get the search bar to actually search the content I created on my pages? No one seems to show that part. Haha

@yourmarketingmindset 2 года назад

Hold on - minor detail. How did you get your website open in an incognito window?

@jonlouvis4582 3 года назад

does anyone have an issue getting search bar to work? I've successfully moved it into the header, but now it won't search anything.

@jonlouvis4582 3 года назад

@@will-myers got it! Thanks so much!

@kirstenscaninegear2326 3 года назад

I can't seem to get my search bar out of the footer but I've followed all of the steps! Any thoughts?

@samstoves1893 3 года назад

did you add the block ID in the correct spot and leave the hashtag in ?

@samstoves1893 3 года назад

you only need the code ID no other part of code section is needed

@jishaansinghal Год назад

Hi, Will it's not working on the firefox browser

@abi-at-WillMyersSupport Год назад

Hey, try out the updated version of this tutorial - www.will-myers.com/articles/adding-a-search-icon-to-your-site-header

@sheep-flicka 3 месяца назад

I got syntax error on line 1

@will-myers 2 месяца назад

Hey, if you could reach out via our Support Page we'd be happy to take a look at this for you!

@nellyc3828 Год назад

doesn't work for me

@hudsonwg42amh 4 месяца назад

Yeah, but my search bar won't find anything! I've tried it.

@will-myers 4 месяца назад

Ha yeah! Squarespace Search has been unreliable historically, hopefully they’ll fix it soon 🤞

@Nomadonthego 2 года назад

The search bar doesn't pull up results...

@mountaintrainmusic3545 3 года назад

I see you are using an incognito window

@alexsmff 11 месяцев назад

There is no advanced settings now

@abi-at-WillMyersSupport 11 месяцев назад

Hey Alex, that's right, Squarespace have made some changes to the layout of their menu's. You can now access the code injection via Settings > Developer Tools.