⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
I wish there was - that would be SO rad, but no, there isn't a built in feature for that. 💔 I have seen people create a search page and use a 🔎 symbol for the navigation title so it looks like a little search icon. Fake it till they make it, right?! 😅 Hope that helps and best of luck with your project!
Great question - but that's tricky! We'll need to adjust the height of the view window for the rest of your site content to accommodate I'll brainstorm on this for a bit and let you know when I have a good workaround for it. Stay tuned :)
Thank you so much for this video! I've found that when I move the bar to the top with the CSS I can no longer edit the section, for example if I need to edit the text. Do you know if there is a way around this?
You can adjust the margin for the header and change the top value to fit the header above it. I would recommend using responsive values so it works on mobile too. You can also make a first page section that has a search bar; it won't be available on every page, but it will work for any page that isn't a collection item.
i already have a footer? when i enter the code in custom CSS section, it uses that one at the bottom of the page and i cant move the search bar lower than the footer how can i fix this ? i have read a comment where youve mentioned "to make a new footer" how do i do that?
In this tutorial video, we start by making a brand new section in our footer for the search bar, then we use custom code to tell a computer browser to “take the first section of our footer and move it to the top of the page, leaving all the other footer sections where they are.”
This was fantastic and worked perfectly! However when I try the search bar, it’s not bringing up the pages I want. Is there a video to show me how to set up my site/pages to play nicely with the search bar?
I cover this in the beginning of the video around 1:40. Add a new section to the top and make it your footer. You'll see that I have a footer section in my demo site and add the new one to show the code.
works great! however, on mobile, I notice that the search bar gets "stuck" - e.g - I don't have the header has "fixed" - and when I scroll a page on mobile, the search bar is still in the background at the top. how do I fix that?
Interesting! I haven't been able to recreate it but if you send me a link I'm happy to hop into the source code for you to take a look. you can reach me here: support-at-insidethesquare.co
Great question, and nope! At this time, there are no limits to the number of footer sections you can have. Add as many as you need, but make sure the second one is the search bar so the code works. Then your third will become second, fourth becomes third, and so on 👍👍
Interesting question! With the footer being the lowest layer in the document tree, under the page, I'm not sure if we can force it to stay above it. I'll have to brainstorm a code workaround for you - stay tuned!
Hey Becky, In addition to your code, I made a small addition and now I have a sticky search bar, but even if I make the header sticky, it's not working. In other words, the search is sticky, but the header has lost its sticky feature. I would greatly appreciate your assistance with this. header,#page{ position: sticky !important; margin-top: 6rem!important; z-index: -1!important; } @@InsideTheSquare update: search bar is working but all other features corrupted. Neıther my cart buttons nor other elements are working. Fyi update2: Setting the z-index to 0 restored the functionality of the other features, but my header is still not sticky. Only the search bar is sticky. I would be very happy if I could make both of them sticky and work simultaneously. New code is like this: #footer-sections .page-section:nth-child(1) { position: fixed!important; top: 0!important; z-index:999!important; width: 100%!important; height: Auto!important; } header,#page{ position: sticky !important; margin-top: 9rem!important; z-index:0!important; }
You can turn that off in your header settings - hop into edit mode on any page, select edit site header, and toggle OFF fixed position; the fourth option down. 👍👍
@@InsideTheSquare I had this same problem! Thank you so much for this great tutorial and for answering specific troubleshooting questions like this. Our site is much improved now!
⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Thank you Becky! You are a most excellent teacher!!
Thank you - glad you like my style!! :)
exactly what I needed! thank you
You're so welcome - glad my tutorail helped! :)
Hi Becca. Is there a way to add a search bar next to the shopping basket?
I wish there was - that would be SO rad, but no, there isn't a built in feature for that. 💔 I have seen people create a search page and use a 🔎 symbol for the navigation title so it looks like a little search icon. Fake it till they make it, right?! 😅 Hope that helps and best of luck with your project!
Thank you so much for this valuable advice! Is there any way to make this section remain visible when you scroll down the page?
Great question - but that's tricky! We'll need to adjust the height of the view window for the rest of your site content to accommodate I'll brainstorm on this for a bit and let you know when I have a good workaround for it. Stay tuned :)
what if I want the search bar on the bottom of the header under the logo and navigation menu? Thank you for all your help!
You can try adjusting the margin until it fits in the right spot! Just pay close attention to mobile; that layout will probably be a different size.
Thank you so much for this video! I've found that when I move the bar to the top with the CSS I can no longer edit the section, for example if I need to edit the text. Do you know if there is a way around this?
Sometimes it's easier to remove the code to make edits and then put it back. Not the most professional solution, but it works! 😅
@@InsideTheSquare Thank you!!
has anyone adjusted this so the alert banner stays at the top of the page? or have this display just below the header but before the body?? thank you!
You can adjust the margin for the header and change the top value to fit the header above it. I would recommend using responsive values so it works on mobile too. You can also make a first page section that has a search bar; it won't be available on every page, but it will work for any page that isn't a collection item.
Thanks so much Beccy 🙂
i already have a footer? when i enter the code in custom CSS section, it uses that one at the bottom of the page and i cant move the search bar lower than the footer how can i fix this ?
i have read a comment where youve mentioned "to make a new footer" how do i do that?
In this tutorial video, we start by making a brand new section in our footer for the search bar, then we use custom code to tell a computer browser to “take the first section of our footer and move it to the top of the page, leaving all the other footer sections where they are.”
This was fantastic and worked perfectly! However when I try the search bar, it’s not bringing up the pages I want. Is there a video to show me how to set up my site/pages to play nicely with the search bar?
You can check out the official Squarespace support articles for that: support.squarespace.com/hc/en-us/articles/217594457-Adding-search-to-your-site
if i already have a footer? itll use that one at the bottom of the page i cant move the search bar lower than the footer how can i do this ?
I cover this in the beginning of the video around 1:40. Add a new section to the top and make it your footer. You'll see that I have a footer section in my demo site and add the new one to show the code.
My mobile version seems to have a larger margin (rem) than the desktop version, how can I adjust?
Interesting! You can create custom code for specific screen sizes using a media query. Here is an article with more info: insidethesquare.co/mobile
works great! however, on mobile, I notice that the search bar gets "stuck" - e.g - I don't have the header has "fixed" - and when I scroll a page on mobile, the search bar is still in the background at the top. how do I fix that?
Interesting! I haven't been able to recreate it but if you send me a link I'm happy to hop into the source code for you to take a look. you can reach me here: support-at-insidethesquare.co
If you use the search bar for the "footer" do you loose the ability to have an 2nd footer down below?
Great question, and nope! At this time, there are no limits to the number of footer sections you can have. Add as many as you need, but make sure the second one is the search bar so the code works. Then your third will become second, fourth becomes third, and so on 👍👍
Thank you!
You're welcome! ☺️
Is there a way to make search bar sticky?
Interesting question! With the footer being the lowest layer in the document tree, under the page, I'm not sure if we can force it to stay above it. I'll have to brainstorm a code workaround for you - stay tuned!
Thank you so much 💘 @@InsideTheSquare 💘
Hey Becky, In addition to your code, I made a small addition and now I have a sticky search bar, but even if I make the header sticky, it's not working. In other words, the search is sticky, but the header has lost its sticky feature. I would greatly appreciate your assistance with this.
header,#page{
position: sticky !important;
margin-top: 6rem!important;
z-index: -1!important;
}
@@InsideTheSquare
update: search bar is working but all other features corrupted. Neıther my cart buttons nor other elements are working. Fyi
update2: Setting the z-index to 0 restored the functionality of the other features, but my header is still not sticky. Only the search bar is sticky. I would be very happy if I could make both of them sticky and work simultaneously.
New code is like this:
#footer-sections .page-section:nth-child(1) {
position: fixed!important;
top: 0!important;
z-index:999!important;
width: 100%!important;
height: Auto!important;
}
header,#page{
position: sticky !important;
margin-top: 9rem!important;
z-index:0!important;
}
@@designnimbus This is EXACTLY what I was looking for. Thank you!
All that happened for me was the new footer I created disappeared.??
If you follow the steps in the video, step #4 is where you can adjust the page margin to reveal the footer you created.
When I tried this tutorial my header section remains fixed in position and everything else scrolls up behind it.
You can turn that off in your header settings - hop into edit mode on any page, select edit site header, and toggle OFF fixed position; the fourth option down. 👍👍
@@InsideTheSquare thank you. I've done that
@@InsideTheSquare I had this same problem! Thank you so much for this great tutorial and for answering specific troubleshooting questions like this. Our site is much improved now!