Collapse/Expand header code not working

I’m having trouble with the code I’ve used to make my header a shrinking one. This is the code I’m using; it’s pretty simple:

I’m new to coding and making websites, so I followed a tutorial for this and tweaked it a little. The original code had columnstrip7 as a show/hide command as well, but I was having issues with the hidden header covering content, making buttons unclickable. That’s why I wanted to change it to a collapse/expand command, so that it wouldn’t take up space while it was hidden. The element does collapse when I scroll away, but the issue is that it won’t expand when I scroll back.

I’m not sure if it’s a code issue or an issue with the way I’m previewing it (I’ve tried both the test site and the regular Wix preview), but I would appreciate some help if anyone else has run into a similar issue or knows what’s wrong. Again, I have no coding background, so I would love to know what I’m doing wrong here.

Hi, @HanaJ !!

This isn’t related to code, but I believe Wix Editor has a setting that hides the header when you scroll. Have you tried that yet? If that setting alone achieves what you want, I think it could be one of the more reliable options to use. :innocent:

like this

2 Likes

Hi @onemoretime !

Thank you for your reply and for sharing the video! I have tried that, but instead of a disappearing one, I’m looking for a way to switch the header to a different, smaller header on scroll.

I didn’t see any options built into Wix for that (I could be wrong), so I did some googling and followed a tutorial for the code (which, as I explained, I tweaked because of an issue and now isn’t working for me :smiling_face_with_tear:).

Are you able to share a link to the site and/or screenshots of the elements you’re using as the trigger?

Sure! The website isn’t published as there’s still more I’m working on, but here is the link for the test site, I hope it works:

This is how the elements are set up in the Wix editor:

The trigger that’s used for the switch is an invisible strip placed around the end of the larger header

I figured it out :sweat_smile:

I replaced the trigger and moved it further down, the original one was too close to the header and moving it away fixed the issue…

Some new lessons learned LOL

Thank you!

2 Likes