lina1570047784 Posted March 29 Share Posted March 29 (edited) 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 March 30 by lina1570047784 clarifying Link to comment
tuanphan Posted April 2 Share Posted April 2 Hi, Can you share link to your site? We can check easier  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
lina1570047784 Posted April 5 Author Share Posted April 5 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? Link to comment
tuanphan Posted April 8 Share Posted April 8 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
lina1570047784 Posted April 11 Author Share Posted April 11 (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 April 12 by lina1570047784 added https Link to comment
tuanphan Posted April 14 Share Posted April 14 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
lina1570047784 Posted April 18 Author Share Posted April 18 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. Link to comment
Vicks Posted April 18 Share Posted April 18 (edited) 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 April 18 by Vicks added transition for animation effect Link to comment
lina1570047784 Posted April 18 Author Share Posted April 18 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
Vicks Posted April 18 Share Posted April 18 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
lina1570047784 Posted April 18 Author Share Posted April 18 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? Link to comment
Vicks Posted April 18 Share Posted April 18 (edited) 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=642d9825554a0f4b93b867cahttps://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 April 18 by Vicks Link to comment
lina1570047784 Posted April 18 Author Share Posted April 18 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=642d9825554a0f4b93b867cahttps://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
lina1570047784 Posted April 27 Author Share Posted April 27 (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 April 27 by lina1570047784 Link to comment
Vicks Posted April 27 Share Posted April 27 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.  Link to comment
lina1570047784 Posted April 27 Author Share Posted April 27 (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.  @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 April 27 by lina1570047784 clarifying Link to comment
Vicks Posted April 27 Share Posted April 27 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 ? Â Link to comment
Vicks Posted April 27 Share Posted April 27 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 ? Link to comment
lina1570047784 Posted April 27 Author Share Posted April 27 unfortunately, this happens when I remove top:0 When scrolling up, the header is not attached to the top. Link to comment
Vicks Posted April 27 Share Posted April 27 is it some custom css you are using? Can you share that? Link to comment
lina1570047784 Posted April 27 Author Share Posted April 27 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
lina1570047784 Posted May 9 Author Share Posted May 9 Any thoughts about this? @Vicks Link to comment
Vicks Posted May 9 Share Posted May 9 11 hours ago, lina1570047784 said: Any thoughts about this? @Vicks I cannot access the website. it says wrong password Link to comment
lina1570047784 Posted May 22 Author Share Posted May 22 (edited) Sorry, @Vicks, it should be: https://hexagon-pentagon-cxa6.squarespace.com pw: sunnyday2 Edited May 22 by lina1570047784 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment