Thank you for this great tutorial! You explain things so well in a clear, concise and calm manner :) You also use best practices which is great too. Thank you!💯
This was a really great walk through and is working great on our new site. Just wondering if there's a way to add to this so on the mobile version (where the header is now over an image) if it's possible to also make the header transparent, or move the image lower, so not to have the top of the image cropped off by the header?
Yeah it would be possible to target the header and make its background transparent. And putting it in a max-width media query could make it only apply on mobile
Great tutorial, Chris..very helpful indeed. I would definitely be interested in the training/course. Also, can you totally customize the SS 'Shop' page using CSS? There is a 'ststic' portion of the page (where your products you have added are shown) and SS doesn't allow you to do anything with it . I want to completely change the way the page looks on my site. Thanks.
Thank you for the positive feedback on the site mini course! As for the shop page, Squarespace will display those as a grid. If you want to do something different, can you send me an email with a reference to what you would like it to look like instead? I can take a look and see if it is possible
I have implemented this on my homepage, but I’m using a portfolio page as my homepage. Is there any way to turn it off for the portfolio subpages so that the nav goes back to the top on those? Thanks!
I had issues too, I think it's because of squarespaces updates. If you're still struggling to get this, start fresh and try the following in the Advanced PAGE HEADER CODE INJECTION on your desired page: .header { position: sticky!important; top: 0px; margin-top:80vh; } #page .page-section:nth-child(1){ margin-top: -105vh; height: 105vh; margin-bottom: 0vh } Note: be sure to adjust the numbers vh numbers based off your site
Just found this tutorial, extremely helpful! You can kinda use it on mobile, however the main issue I find is when opening the menu while the header isnt fully at the top of the page yet. It sticks the logo and x-symbol to the position of the header at the time you hit the menu icon, which looks kinda weird. Do you know any workaround to this? In order to make the header stick to the top when the menu is open? Thank you very much!
Thanks so much for this tutorial! Unfortunately the script isn't working (the header code is staying above the first section). I double checked my section ID and it's "header" so I kept the code as is. Any ideas?
I was following this tutorial as a newby to Squarespace and for some reason I can not get the first java script element to work. I have the code exactly the same, but it does not work for some reason. Any ideas?
@@SEWebDesign Yes, I believe so. This is my code below document.addEventListener("DomContentLoaded",function() { const header = document.getElementById('header'); const firstSection = document.quertSelector('.page-section:first-child'); firstSection.after(header); }); The 'header' matches my header id
@@alexramskill3662 Its very difficult to troubleshoot just looking at it like this. Are you using 7.1? If you would like to set up a 1:1 call we can look at it together. Send me an email and I'll follow up there.
Thank you so much for this tutorial! This is one of, if not the best tutorials I have watched with Squarespace. You're amazing!
Thank you Hannah!
Thank you for this great tutorial! You explain things so well in a clear, concise and calm manner :) You also use best practices which is great too. Thank you!💯
Thank you Cicely!
I just found you through this video. This is one of the best tutorials I've ever seen. The explanations of coding and reasoning is fantastic.
Wow that is amazing feedback! Thanks so much!
Wonderful Chris... As always thanks for sharing!
I'm glad you enjoyed it! Thanks for watching Roland!
I was trying to figure out how to do this two months ago but had no idea how haha. Thank you for this video!
This was a really great walk through and is working great on our new site. Just wondering if there's a way to add to this so on the mobile version (where the header is now over an image) if it's possible to also make the header transparent, or move the image lower, so not to have the top of the image cropped off by the header?
Yeah it would be possible to target the header and make its background transparent. And putting it in a max-width media query could make it only apply on mobile
Great tutorial, Chris..very helpful indeed. I would definitely be interested in the training/course. Also, can you totally customize the SS 'Shop' page using CSS? There is a 'ststic' portion of the page (where your products you have added are shown) and SS doesn't allow you to do anything with it . I want to completely change the way the page looks on my site. Thanks.
Thank you for the positive feedback on the site mini course!
As for the shop page, Squarespace will display those as a grid. If you want to do something different, can you send me an email with a reference to what you would like it to look like instead? I can take a look and see if it is possible
Thank you! This was sooo helpful. Is there a way to implement this into the mobile version?
I don't have code for it but honestly I strongly recommend keeping the normal mobile view for the best experience.
I have implemented this on my homepage, but I’m using a portfolio page as my homepage. Is there any way to turn it off for the portfolio subpages so that the nav goes back to the top on those? Thanks!
I think maybe by adding the collection ID of only the portfolio homepage
I had issues too, I think it's because of squarespaces updates. If you're still struggling to get this, start fresh and try the following in the Advanced PAGE HEADER CODE INJECTION on your desired page:
.header {
position: sticky!important;
top: 0px;
margin-top:80vh;
}
#page .page-section:nth-child(1){
margin-top: -105vh;
height: 105vh;
margin-bottom: 0vh
}
Note: be sure to adjust the numbers vh numbers based off your site
Just found this tutorial, extremely helpful! You can kinda use it on mobile, however the main issue I find is when opening the menu while the header isnt fully at the top of the page yet. It sticks the logo and x-symbol to the position of the header at the time you hit the menu icon, which looks kinda weird. Do you know any workaround to this? In order to make the header stick to the top when the menu is open?
Thank you very much!
Please send me an email for custom code support!
@@SEWebDesign I actually figured out this one myself, but thanks!
Thanks so much for this tutorial! Unfortunately the script isn't working (the header code is staying above the first section). I double checked my section ID and it's "header" so I kept the code as is. Any ideas?
Make sure you are viewing the live site or the trial in an incognito window. Let me know if that solves it
What happens if I have other coding in my Code Injection block for something else? Do I put all the javascript within the same tag? Thanks!
Use separate script tags for each code snippet. That will help everything stay organized
I was following this tutorial as a newby to Squarespace and for some reason I can not get the first java script element to work. I have the code exactly the same, but it does not work for some reason. Any ideas?
Did you update the block id's to match your own?
@@SEWebDesign Yes, I believe so. This is my code below
document.addEventListener("DomContentLoaded",function() {
const header = document.getElementById('header');
const firstSection = document.quertSelector('.page-section:first-child');
firstSection.after(header);
});
The 'header' matches my header id
Any ideas?
@@alexramskill3662 Its very difficult to troubleshoot just looking at it like this. Are you using 7.1? If you would like to set up a 1:1 call we can look at it together. Send me an email and I'll follow up there.
@@SEWebDesign Just sent you an email now!