⚠️ 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: ua-cam.com/video/euJqHXs_L1M/v-deo.html
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 :)
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 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.
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?
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 👍👍
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.
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!
Totally! Member areas are just folders of content you have to log in to access. You can use CSS to hide that footer section in any page that isn’t in the member area by adding it to page header code injection.Here is a tutorial with more info: insidethesquare.co/singlepage
⚠️ 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: ua-cam.com/video/euJqHXs_L1M/v-deo.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! :)
Thanks so much Beccy 🙂
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 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 :)
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
Thank you!
You're welcome! ☺️
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.
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!!
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
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
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 👍👍
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.
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.
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!
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!
Hi, I love this, is there a way that I can only have it in the member's area?
Totally! Member areas are just folders of content you have to log in to access. You can use CSS to hide that footer section in any page that isn’t in the member area by adding it to page header code injection.Here is a tutorial with more info: insidethesquare.co/singlepage