Text not selectable/clickable after hiding header

Ask the community
,
1

Hi,

I am using two strips inside the header in my page (on the Home page, when the user scrolls, the header colapses by hiding one strip and showing another; in all other pages, I use the smaller header with the code bellow).

Because of that, my header has to be the size of the tallest strip, but when the user scrolls, the part of the body of the page that stays between the differences of the taller and the shorter strip becomes un clickable/selectable.

What can I do? Attached, I’m sending a screenshot to get the better picture.

2696×492 155 KB

The code I’m using is simple:

import wixWindow from 'wix-window';

$w.onReady(function () {
    $w("#scrollingHeaderStrip").show();
    $w("#defaultHeaderStrip").hide();
});

Thanks in advance!!

2

Actually, your strip can be bigger than the header, you just have to make sure that it is attached to the header.
So the smaller strip would define the heigth of the header, and the bigger strip will be attached to the header, overlaying the rest of the page.

3

Are you sure about that? When I try to resize the header it shrinks only until the end of the tallest strip within it.

If I try to get the taller strip out of the header, resize the header, and the drag the taller strip back to the header it doesn’t attach to the header…

If you know another way I’d love to know, because I think that’s exactly the origin of the issue!

4

Do not overlap BLUE-body-lines with ORANGE-header-lines, than everything should work like expected.

Put elements into a strip and collapse or expand strips if needed.

To handle all actions you should write control-functions on a public page.js.

5

Thank you both for your help!
I managed to make it work, just not the way I was thinking I could at first.

I resized my header to the size of the shorter header and put the taller header in the BODY of the page, using Velo to show/hide each one when the user scrolls.

Well, it works! Thank you very much!

6

It’s a workaround but it is not going to work in other pages unless you copy it over.

I just tested it on the older Editor and you are right, you cannot attach anything bigger than the header, and if it is smaller, you cannot attach it to the edge.

I’ve been using Editor X for more than an year, so forgive me about my mistake.

PS: I used to do this before migrating to Editor X, I think.

7

I just tried to attach an equal or smaller strip to the header and then resizing it using the toolbar and it worked like a charm. That’s the way to do it.

8

@bwprado Yes! Luckily I only use this larger header on one page, so it’s ok for now. I still have to give EditorX a try, it seems awesome.