Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.39k stars 1.98k forks source link

Floating/Sticky Header in FSE #61756

Open syhussaini opened 2 years ago

syhussaini commented 2 years ago

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:

Header-Layouts

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

annbingle commented 2 years ago

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

jp-imagines commented 1 year ago

Had another similar request in 36958084-hc.

filipanoscampos commented 1 year ago

Another one, here: 5693749-zd-woothemes

github-actions[bot] commented 1 year ago

Support References

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

sharonlaker19 commented 1 year ago