Shrinking Header Not Working Well

Ask the community
, ,
1

Hi All,
So, I have this shrinking header that looks really cool on homepage using an anchor located in the header area with onViewportEnter/Leave commands. However, the design is such that the large Logo is seen only on homepage and in the other pages I prefer to see only the smaller/shrunk version of the header.

The problem is that - if I scrolled down and switched a page, than it looks good, the way I want it to. But, if I switched a page without scrolling first or landed first on any page other than homepage - then I get the larger version of the menu without a logo. Here’s a video to show you what I mean.
https://www.useloom.com/share/d95a4288929b47d49fc5f3e405573304

The code was placed in the Site Tab, but this doesn’t help because the anchor doesn’t repeat in the other pages anyway.

Any idea what I am doing wrong and how to fix this?

TIA.

2

Anyone? I’m still stuck on this and have no idea how to approach it.

3

Would still love your guys’ help…

4

Hi,

From what you said here

The code was placed in the Site Tab, but this doesn’t help because the anchor doesn’t repeat in the other pages anyway.
Can you try copying the anchors with the same Javascript ID (Example: anchor1 ) and then click on the onViewportEnter & onViewportLeave Function on the Properties Panel to activate it, by doing this you will get the regular export function… on your Page Tab.

Just delete the export function on the page tab and it should be fine.

Its not an exact solution but maybe you can try a workaround with something like this

5

@shantanukumar847 Thanks. I did that before, and the result is that the large menu doesn’t hide as it should… you can see both menus. But in homepage it works correctly, while the code is still in the Site tab.
I can’t explain that.
https://www.useloom.com/share/4788b5372a77493c9afa32b82a712ed4

6

@naama-t-l Did you also activate the onViewportLeave ? Cause it seems like the menu is not getting hidden

7

I have these simple lines for my client’s website www.think-recruitment.com and it works fine

export function anchor1_viewportEnter(event, $w) {
    $w("#menu1").show();
    $w("#menu2").hide();
}

export function anchor1_viewportLeave(event, $w) {
    $w("#menu1").hide();
    $w("#menu2").show(); 
}
8

@shantanukumar847 do you mean on the menu itself? normally I do it on the anchor… I tried onViewportLeave and Enter. Now the BigMenu hides, but when I scroll back up it becomes empty.

9

@shantanukumar847 I just saw the example you sent me. I made a few of those before. never had an issue… :expressionless:

10

@naama-t-l
Hi,
Did you manage to get it working?
Roi.

11

@roi-bendet Yes. I had to simplify some of it. It works fine now :slight_smile:

12

@naama-t-l Glad it worked out!