Jump to content

Code for partially sticky header in 7.0 Wexley?

Recommended Posts

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.)

Edited by lina1570047784
clarifying
Link to comment
  • lina1570047784 changed the title to Code for partially sticky header in 7.0 Wexley?
  • Replies 24
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Posted (edited)

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).

Edited by lina1570047784
added https
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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> 

 

Edited by Vicks
added transition for animation effect
Link to comment
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.

Link to comment
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.

Link to comment
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

Edited by Vicks
Link to comment
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! 🙂

Link to comment
  • 2 weeks later...
Posted (edited)
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

Edited by lina1570047784
Link to comment

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.

image.thumb.png.ad148a42f6eddd342fc85c0ba02cbe3f.png

 

Link to comment
Posted (edited)
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.

image.thumb.png.ad148a42f6eddd342fc85c0ba02cbe3f.png

 

@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.

Edited by lina1570047784
clarifying
Link to comment

I see this:
image.thumb.png.d2b13e89547195f8c2d6615f437151ef.png

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 ?

 

Link to comment

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.

image.thumb.png.20b5f8980943acea8d8f168366b35cf8.png

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

Link to comment
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;
}

 

Link to comment
  • 2 weeks later...
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.