Hide Header and Footer on Desktop only

Ask the community
1

#featureRequest
As of right now, hiding the header and footer on a page also hides them on mobile, which wouldn’t be a problem but for the fact that the menuContainer only exists inside the header. So the mobile menu becomes completely inaccessible on that page.

On the other hand, there’s no way to collapse the header or footer on specific pages, which means there are no viable alternatives at all without creating a new mobile menu for that page that won’t have the same CSS animations. I’d love for all of these features to be added, but I’ll settle for any of them please :slight_smile:

2 Likes
2

Really good #FeatureRequest, specifically creating a difference in behavior from the desktop and mobile when it comes to hiding the header and footer.

3

This can be done now using the code

import wixWindow from "wix-window";

$w.onReady(function () {
    if (wixWindow.formFactor === "Desktop") {
        $w("#header").hide();
        $w("#footer").hide();
    }
});

or you can use collapse

4

Thanks Eugene, but not all elements can be hidden or collapsed. The footer and header don’t have that option.

You’ll see no hidden or collapsible mixin in the documentation.

5

Yes, sure, you are right. But you can add a strip to the header or footer. You will need to attach a logo, menu and other elements to this strip. Then you just need to hide this strip.

I don’t know what you want to build. Perhaps my example will not suit you.
But it works for me.

6

Even if you collapse these strips, you will be left with an unclickable gap at the top of the page as tall as the header, and a blank gap at the bottom the size of the footer.

7

Excellent. What is your use case? Wow. Just saw the date… Lots of updates.

8

From https://www.wix.com/velo/profile/russian-dima/profile