Code for partially sticky header in 7.0 Wexley?

Hi, is there a code for making my horisontal header in Wexley 7.0 partially sticky? I want it to go away when scrolling down, and come back when starting to scroll up. The page is a vertical gallery of images. (Mine is not online yet, but it looks just like Wexley template.)

Hi,

Can you share link to your site? We can check easier

My site is online with Wells template, but I'm about to switch to Wexley template, so right now that's just a preview. I can't find a way to show that to you, but feel free to let me know if there's a way?

On 4/5/2023 at 9:05 PM, lina1570047784 said:

My site is online with Wells template, but I'm about to switch to Wexley template, so right now that's just a preview. I can't find a way to show that to you, but feel free to let me know if there's a way?

You can duplicate the site, set template there then share url

Thank you! The duplicate site is https://nectarine-salamander-dztm.squarespace.com and pw is rainyday. I've added a custom CSS from this forum (maybe yours), and changed some of the numbers in it. Without that CSS, my header just disappears when scrolling. But what I want is the header to disappear when scrolling down, and reappear when starting to scroll up (or a second later or so).

On 4/11/2023 at 3:48 PM, lina1570047784 said:

Thank you! The duplicate site is https://nectarine-salamander-dztm.squarespace.com and pw is rainyday. I've added a custom CSS from this forum (maybe yours), and changed some of the numbers in it. Without that CSS, my header just disappears when scrolling. But what I want is the header to disappear when scrolling down, and reappear when starting to scroll up (or a second later or so).

Hi,

Did you solve?

On 4/14/2023 at 11:55 AM, tuanphan said:

Hi,

Did you solve?

No, hoping that someone can help me out with a code for this problem.

25 minutes ago, lina1570047784 said:

No, hoping that someone can help me out with a code for this problem.

 Here you go:
 

<style>
  #headerWrapper {
    transition: top 0.5s;
  }
  
  #headerWrapper.hide {
  top: -100px;
}
</style>
<script>
  let prevScrollPos = window.pageYOffset;

window.onscroll = function() {
  let currentScrollPos = window.pageYOffset;
  if (prevScrollPos > currentScrollPos) {
    document.querySelector("#headerWrapper").classList.remove("hide");
  } else {
    document.querySelector("#headerWrapper").classList.add("hide");
  }
  prevScrollPos = currentScrollPos;
}
</script> 

4 minutes ago, Vicks said:

 Here you go:
 

<style>
  #headerWrapper.hide {
  top: -100px;
}
</style>
<script>
  let prevScrollPos = window.pageYOffset;

window.onscroll = function() {
  let currentScrollPos = window.pageYOffset;
  if (prevScrollPos > currentScrollPos) {
    document.querySelector("#headerWrapper").classList.remove("hide");
  } else {
    document.querySelector("#headerWrapper").classList.add("hide");
  }
  prevScrollPos = currentScrollPos;
}
</script> 

 

Thanks a lot for quick response, it says syntax error on line 1 though, and doesn't work.

Just now, lina1570047784 said:

Thanks a lot for quick response, it says syntax error on line 1 though, and doesn't work.

notice that its two part. <style> and <script> I believe you need to add separate code blocks, one for style and other for script.

1 minute ago, Vicks said:

notice that its two part. <style> and <script> I believe you need to add separate code blocks, one for style and other for script.

Thank you, I'm not sure where to add them then? Not in Design > custom css?

8 minutes ago, lina1570047784 said:

Thank you, I'm not sure where to add them then? Not in Design > custom css?

my apologies, you don't need two blocks, both can be inserted together.

Perhaps this might help:

https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site?platform=v6&websiteId=642d9825554a0f4b93b867ca

https://support.squarespace.com/hc/en-us/articles/206543617

Just go to settings > advanced > code-injection. and add the whole block into "footer".  Not sure if thats what you see in 7.0

12 minutes ago, Vicks said:

my apologies, you don't need two blocks, both can be inserted together.

Perhaps this might help:

https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site?platform=v6&websiteId=642d9825554a0f4b93b867ca

https://support.squarespace.com/hc/en-us/articles/206543617

Just go to settings > advanced > code-injection. and add the whole block into "footer".  Not sure if thats what you see in 7.0

Thank you, it seems to work! 🙂

Happy to help 🙂

On 4/18/2023 at 10:51 AM, Vicks said:

 Here you go:
 

<style>
  #headerWrapper {
    transition: top 0.5s;
  }
  
  #headerWrapper.hide {
  top: -100px;
}
</style>
<script>
  let prevScrollPos = window.pageYOffset;

window.onscroll = function() {
  let currentScrollPos = window.pageYOffset;
  if (prevScrollPos > currentScrollPos) {
    document.querySelector("#headerWrapper").classList.remove("hide");
  } else {
    document.querySelector("#headerWrapper").classList.add("hide");
  }
  prevScrollPos = currentScrollPos;
}
</script> 

 

@Vicks Unfortunately, this code made the navigation menu disappear in mobile preview. Is there a way to solve this?

https://hexagon-pentagon-cxa6.squarespace.com
pw: working123

I do not see any navigation menu on your website neither on desktop nor on mobile. Looks like there is no item inside the topnav element. ( see your website code attached in image)

Are you using some other scripts also on your site which might be malfunctioning and removing it?

The script I provided only moves the header up and down 100px based on scroll position, it does not remove anything from HTML. So there must be something else causing it.

can you explain how do I see the nav menu? If its caused by my script,  can you remove my script only and check if the menu appears again? because I do not see the menus at all.

5 minutes ago, Vicks said:

I do not see any navigation menu on your website neither on desktop nor on mobile. Looks like there is no item inside the topnav element. ( see your website code attached in image)

Are you using some other scripts also on your site which might be malfunctioning and removing it?

The script I provided only moves the header up and down 100px based on scroll position, it does not remove anything from HTML. So there must be something else causing it.

can you explain how do I see the nav menu? If its caused by my script,  can you remove my script only and check if the menu appears again? because I do not see the menus at all.

 

@Vicks Sorry, I saw too late that this test site had no menu. I added it back, probably while you wrote this. And yes, it's your code that's removing the menu. It comes back when taking away the code. So @Vicks yes I still need help.

I see this:

The topnav element is display:none. I am not sure what is causing it. because my script is only adding and removing a class called 'hide' in the #headerwrapper element. which is just moving it 100px up or down. it cannot hide the menu.

Can you remove my script from the page, so that I can see the normal behavior?

Also please send me the script which you have added to your website. Is it just this or is there some more lines ?

Found the issue: You have this position: fixed !important on header. which is also setting top:0; Thats whats causing your menu to disappear on mobile.

If I remove the top:0, it solves the issue. is it done with custom css or is it squarespace default ?

unfortunately, this happens when I remove top:0

When scrolling up, the header is not attached to the top.

is it some custom css you are using? Can you share that?

1 hour ago, Vicks said:

is it some custom css you are using? Can you share that?

Yes, this one. And I removed top:0 as you said.

div#headerWrapper {
 
    position: fixed !important;
    left: 0;
    right: 0;
    padding-top: 25px;
    padding-left: 35px;
    padding-right: 35px;
    background-color: #ffffff;
}
div#pageWrapper {
    margin-top: 72px;
}

Any thoughts about this? @Vicks

11 hours ago, lina1570047784 said:

Any thoughts about this? @Vicks

I cannot access the website. it says wrong password

Sorry, @Vicks, it should be:

https://hexagon-pentagon-cxa6.squarespace.com

pw: sunnyday2