Hi! I’m trying to create a menu that changes appearance when you scroll down past a certain point in the page.
I found some instructions on how to do it here https://www.wix.com/code/home/forum/questions-answers/how-to-create-a-sticky-header-menu and am giving them a try, but I’m having trouble with the first step: it seems headers can’t be collapsed.
I tried placing a strip of the same size over it and collapsing that. It worked, but I can still see part of the actual header - a thinner strip that sticks to the top of the page… Any ideas on how I can make it disappear completely?
Thanks!
Make one strip that acts as the normal menu and another smaller one that acts as the sticky menu, hide one and show the other.
Thanks Andreas! I think there might be an issue with that, though. I’d have to use the “No header & footer” layout to do it, and that means I can’t select the “show on all pages” option. It’s doable, but not very practical to place the header and footer strips manually on ever page, specially for a big website. Would there be any way of collapsing the normal header?
This is what I’m getting collapsing the strip and elements over it:
Ok so why do you want to collapse the whole header? Is it a sticky menu you want to create?
Yep, I want the white one to replace the transparent strip when I scroll down
Luana I had the same issue and someone in the Wix Expert Design group on FB straightened me out last night! Now it works perfectly. Do you still need help?
Hi Anne! Yes, thank you! What did they tell you?
Luana, this was my problem when I was following the steps on the original instructional post:
The yellow strip navigation would be hidden until the user would scroll down far enough, then it would pop out - perfect! The problem was if a user scrolled back up, the yellow header would not disappear. Is this the same issue you are having? If so, read on!
Another member of the ’ Wix Design Experts ’ group on Facebook (HIGHLY recommend this group) actually made the change for me. His name is Derrick Scott and I give him complete credit for fixing this for me as I was stumped!
He wrote and said:
“You have to add the code via an anchor because the white strip is not in the header so it can’t be on the “site” page. I added it to all pages.”
Here is what the code looks like after his changes:
Here is a link to the in progress site so you can see it functioning: https://annekirkdesign.wixsite.com/100bowlsredesign
Does this help?? I’m sorry I can’t personally explain it better as I got help from Derrick, but let me know if you have more questions and I can try to get you some help, too!
1 Like
Thanks Ana! This isn’t exactly my problem, but I noticed something in your second screenshot - you were able to set the page’s header (yellow strip) as hidden on load! This is what I’m not being able to do, my header doesn’t display the hidden and collapsed options on the properties panel, so I can only hide the elements withing it instead of the whole header. Because of this, I end up having a “leftover” strip of the header that doesn’t disappear when the rest does…
Oh dang I wish I could be more help, I really have no idea how it’s all happening. I didn’t have the problem you are having. When I right click and look at the arrangement up top, my elements are ordered Strip (yellow)/Header/Strip (white large one). Not sure if that is making a difference.
This is the full code I have going on: (columnStrip 9 is the yellow strip)
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here…
});
export function menuAnchor_viewportEnter(event) {
$w(“#columnStrip9”).hide();
}
export function menuAnchor_viewportLeave(event) {
$w(“#columnStrip9”).show();
Hi Luana!
Can you please share a link to your site? I’d be happy to take a look.
Liran.
Oh thank you Anne!! You gave me an idea, I tried placing both strips on the header instead of one there and one in the body, and it worked! I just had to add one step to the function so the second strip disappears when you scroll down, so it looks like this:
export function heade_viewportLeave() {
$w(“#strip”).expand(“strip”);
$w(“#heade”).collapse(“heade”);
BUT, now I’m having the same problem you had… So I’m going to try your anchor solution!
1 Like
Just so I understand, the problem now is that the header won’t go back to the initial state when scrolling up?
SOUNDS LIKE YOU ARE CLOSE!! I was so stoked to get this kind of menu on a Wix site, oh man. I want you to feel as happy as I did! 
1 Like
@Liran
Yes, that’s right. Since both strips are in the header, I need one to be collapsed on load and the other one to collapse when the first one expands. But since it’s collapsed, I can’t include an onEnter function with it. I guess I need a different element for the onEnter function to have it expand again, so I’m trying to find a way to do it that lets me use the site tab - it’s going to be a big website, so it wouldnt be helpful to repeat the code for every single page. Using anchors or other elements moves the function to the page tab.
Me too, Anne!! I’ve been wanting to do something like this for a while, hoping I’ll get it to work. Thanks for helping!!
1 Like
Instead of using an Anchor, try using a transparent line, and set it to be shown on all pages using the right click menu. Then define it’s viewPortEnter or viewPortLeave function.
This will make the code be a part of SITE CODE tab, and should solve the problem for all pages.
I think this should do the trick.
Liran.
Oh thank you! I had tried that and must have done something wrong, because it still showed on the page code tab, but it’s working now.
Menu’s all set!!
1 Like
Hi ! Can someone make a step by step of this ? Thank you so much ! Justine