Floating/Sticky Header in FSE

[syhussaini]

What

I would like to have the option to enable or disable the Floating/Sticky header in the FSE Editor. There should also be options to drop shadow below the header area that can make it look stand out from the rest of the page if both the page and the menu background are set to the same color.

Why

With the Floating/Sticky header, the site visitors will have a fantastic user experience as the menu remains visible all the time. The business's branding remains on the top, adding more charm to the user experience.

How

The WooCommerce.com site currently has this kind of header on the Mobile version.

Please click here to see the GIF image for reference.
Additionally, the following themes on WooCommerce also have a Floating/Sticky Header.

https://themes.woocommerce.com/proshop/
https://themes.woocommerce.com/outlet/

They also have the header banner image added in the floating area.

The layout of the same themes looks something like the following:

We can have different options to set the layouts for the Header.

[annbingle]

I got the same request in my chat here 35407283-hc

[jp-imagines]

Had another similar request in 36958084-hc.

[filipanoscampos]

Another one, here:
5693749-zd-woothemes

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 5693749-zen
• 5706951-zen

[sharonlaker19]

• 5706951-zen

[Robertght]

We have a request raised here: #86286

I'm going to close for now so we can keep better track of it.