Header not collapsing fully

Ask the community
,
1

Hey everyone,

On few pages of my site, I only want the footer to show and not the header.
I’m using the following code to collapse the header

$w( “#header1” ).children.forEach((item, i) => {
item.collapse();
}

This code is working partially but not fully as even after collapsing the header, there is a small strip across the top of the page. (see screenshots below)

Would appreciate any help with this.

Thank you.

Screenshot #1 - normal header

1200×173 26.7 KB

Screenshot #2 - partial collapsed header

1067×134 24.7 KB

2

Any help regarding this please?
Has anyone else encountered the same issue?
Are you able to reproduce it on your end?

3

I am not sure if someone can help you just by looking onto this two little pics.
I assume you could have some hidden elements, which prevent the stripe to hide.

But i tested your code and found a little error.

Here you can see how it works… (your-code)!

https://russian-dima.wixsite.com/meinewebsite/header

4

Thanks so much @russian-dima . Yes works pretty well on your demo site.
In the header, I did have a hidden text element. After removing it the header has now collapsed a tiny bit more. I now just have a logo image, horizontal menu and login bar. I have tried removing absolutely everything but the strip still remains.

Interestingly, I have played around with reducing the height of my header.
As soon as I make it below 70 px, the header strip collapses significantly more.

Btw I don’t take credit for this code. I got it off from another post.

5

Try your code, one more time on a fresh clear page.
You will surely have a lot of stuff (stripes / boxes and more) which are hidden/collapsed or something like that.

Your founded CODE works good. You have seen it already on my example page.

P.S. And do not forget to like it, if you liked it :wink:

6

@russian-dima Thank you for confirming that the code is good. Appreciate your help with this :slight_smile:

7

@arjunchahal

You are welcome.

8

Hi @russian-dima hope you’re well.

I have been noticing a slight anomaly with the header collapse function and was curious if you have the same issue too.

When I visit a page where the header is supposed to collapse, everything is working fine. However, from a collapsed header page if I click on a link to visit another page where the header isn’t supposed to collapse; it still shows collapsed. The only way to get the header back is if I refresh the page.

This most likely is per design as I’m guessing the header and footer do not refresh for every page to save on page load time and bandwidth.

I just checked out your website too but wasn’t able to reproduce the issue as your page with the header collapse code doesn’t have any external links to other pages where the header isn’t collapsed…either way should be fairly easy to replicate.

Some digging around on the forum has revealed that I can force a refresh by using the wix.location API however I’m a bit reluctant to go down that route as it might lead to slower browsing experience.

Anyways, just wondering if there may be any workaround/solution for this?

Thanks for your help.

9

@arjunchahal

Hello again,

all you have to do is to reverse the function.

function show_Header() {$w("#header1").children.forEach((item, i) => {item.expand();})}

export function button2_click2(event) {
    show_Header()
}

I have expanded my EXAMPLE on my site. Now you are also able to expand the header.
You could now for example expand it automatically on the site you need (in the onReady-function).

Good luck and happy coding.
Do not forget to leave a like or even a best answer.:wink:

10

@russian-dima that was easy! thanks for that :slight_smile:

11

@arjunchahal
No problem.

And do not forget to like it, if you really liked it :wink: