Header styling

I am creating a website from a blank template. Does anyone now how I would create a header like the following website haultainhealth .com? Where the top strip disappears but the navigation and logo remain?

Hi :raised_hand_with_fingers_splayed:

You can create a global anchor on top of the page and set the header to be fixed, and an onViewportEnter() and onViewportLeave() event handlers to the anchor to expand the strip when enter, and collapse the strip when leaving the view port. You must assure that the anchor is not a child element in the header.

Hope this helps~!
Ahmad

Hi Ahmad:)
Thanks so much for the suggestion for the code!
So I have done the following
I have created 2 strips(strip 2 is the one that needs to disapper and strip 1 should stay.
I put both strips in the header.
This the javascript for the anchor below strip 2 (the strip that should disappears on leave


:and then I added this is the code for the header:


However, the strip 2 is still not disappearing dispite the javascript added to the anchor?

Many apology, my java script coding skills are not great:)
Any help and guidance would be most appreciated as to what the issue could be.
With many thanks,
Holly

The anchor needs to be visible on all pages, but not as a child element in the header, the header must be freeze, the code must be in the Site code section.

Also, you need to import the Wix Location module .

import wixLocation from 'wix-location';

@ahmadnasriya

holly.n
1m ago
Hi Ahmad. Belated thank you for your help and suggestions. I am new to coding but will look at the points you made in order to improve my code:)