lina1570047784

1 hour ago, tuanphan said:

Add to Design > Custom CSS

Thank you so much! Actually, @tuanphan, I just decided I will leave the hover function and just keep regular captions. But how do I get captions in lightbox mode?

Sorry, @Vicks, it should be:

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

pw: sunnyday2

Hi, @tuanphan, I see that we're 2 people asking similar questions here. My question is:
I'm using 7.1 Gallery Grids, Strips. I would like the caption hover function + no extra white space underneath the images (where the captions should have been) + if possible captions in Lightbox mode too.

Happy for some help, if possible.

https://chiton-nectarine-r7sw.squarespace.com

pw: rainyday2

Any thoughts about this? @Vicks

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;
}

unfortunately, this happens when I remove top:0

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

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.

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

22 hours ago, tuanphan said:

 

I see you figured it out?

No, sorry @tuanphan, I haven't figured it out. Happy for some help, if possible. I'm using 7.1 Gallery Grids. I would like the hover function + no extra white space underneath the images (where the captions should have been) + captions in Lightbox mode.

2 minutes ago, tuanphan said:

Sorry. I don't see your comment. Do you still need help? Can you share link?

I see you figured it out?

Oh, sorry, I was literally just testing out your Masonry code, but it was for 1 minute. Now I'm back with Grids and the question is still valid.

Hello @tuanphan , I've tried a few of the codes you've provided earlier in this thread but they don't seem to work for me. Do you mind helping me out?
I'm using Gallery Grid in 7.1 and would like the captions + semi opaque color (black or white) to appear on the image when hovering the image. I'd also like the caption to be visible in lightbox view. Is this possible?

chiton-nectarine-r7sw.squarespace.com

pw: desktoprain

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! 🙂

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?

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.

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.

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

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 1/1/2021 at 5:51 AM, Beyondspace said:

Add this to Settings->Advanced->Code Injection->Footer

<style>
	header.Header,
    .Mobile-bar {
      transition: transform 0.4s;
    }
    .scroll-down header.Header,
    .scroll-down .Mobile-bar {
      transform: translate3d(0, -100%, 0);
    }
</style>
<script>
	document.addEventListener('DOMContentLoaded', function() {
            const body = document.body;
            const scrollUp = "scroll-up";
            const scrollDown = "scroll-down";
            let lastScroll = 0;

            window.addEventListener("scroll", () => {
              const currentScroll = window.pageYOffset;
              if (currentScroll <= 0) {
                body.classList.remove(scrollUp);
                return;
              }

              if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
                // down
                body.classList.remove(scrollUp);
                body.classList.add(scrollDown);
              } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
                // up
                body.classList.remove(scrollDown);
                body.classList.add(scrollUp);
              }
              lastScroll = currentScroll;
            });
    });
</script>

 

Hi, this is what I've been looking for ...  the header to go away when scrolling down, but reappear when scrolling up. I have Wexley 7.0 and this code doesn't work. I Do you happen to know if there is a code for this? Thanks in advance.

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