Hide Header

Ask the community
1

Hi community, is there a way to remove/hide the header from the home page?

2

Hi! You can do this by accessing the Wix Editor and then navigating to the “Header & Footer” section. From there, you can select the “Header” element and then use the settings menu to hide or remove the header from the home page.

3

Hi, thanks for your reply.

What do you mean with “Header & Footer” section? where can I find it?
In the editor, I can select the header but when I do it, there is no hide or remove option.

4
  1. Go to Editor
  2. Open sidebar
  3. Click on the Site you want remove the Header
  4. Click on the 3 points … Button
  5. Open Site Settings
  6. Click on Layout
  7. Remove Header ^^

If you want only hide the Header then work with Wix Velo. For that you need activate Wix Velo Devmode. Use Collapse function.

5

Hi, ok with steps 1-6.

Step 7. Unfortunately it is not possible to remove the header only (see pic)

6

Then you need wix Velo developer tool. And using the Collapse function for the Header.

7

Maybe this workaround can be useful for you. Take all the children of $(“#header1”) and collapse them, then change the background color to the page color.

if((wixLocation.url === "https://www.mydomain.com.br/mypage") ){
    
    for (let i = 0; i < $w('#header1').children.length; i++) {
                
                    $w('#header1').children[i].collapse();
                    $w('#header1').style.backgroundColor = "#FFFFFF";
                    
               
            }
}

This is done inside masterPage.js with the Velo code.

8

Hi, thanks for the answer.

I tested the code and actually it removes the header’s content (the children) but not the header as such which means that on top of the page I still see a an empty bar (the header).

9

I tried it but it is seems that I cannot use collapse on the Header. Did you manage to use it?

10

You have tried to move the header by changing the size and make it transparent? “Stretch” it to smallest size.

11

Yes, this bar I couldn’t remove, because in $w(“header”) it does not accept the collapse.
So with code I leave the bar with the same color as the background of the page or with transparency.

12

Hi again, I made it work on desktop but the code I wrote seems not to be working on mobile. What did I miss?