Automattic / wp-calypso

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

Subscription gifting banner conflicts with themes with fixed menus #72438

Open jp-imagines opened 1 year ago

jp-imagines commented 1 year ago

Quick summary

On themes with a fixed menu (sticky menu), enabling the "gift subscription" banner causes the menu to "stick" partway down the page, rather than to the top of the page.

Steps to reproduce

  1. Enable a theme with a fixed menu: https://wordpress.com/themes/filter/fixed-menu/
  2. Enable the Allow site visitors to git your plan and domain renewal costs toggle at Settings > General.
  3. View the site, and scroll down.

What you expected to happen

The header should stick to the top of the page, as it does with the banner disabled:

Markup on 2023-01-23 at 10:03:12

What actually happened

There is a gap above the fixed header element, the same size as the subscription gifting banner:

Markup on 2023-01-23 at 10:03:38

(Screenshots from Stratford theme.)

Context

5879061-zd-woothemes (Retired Purpose theme.)

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

Tested on Stratford and Purpose, likely affects other "fixed menu" themes.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

CSS could be used as a workaround (on Premium plan or higher), but the specifics would depend on the theme. The WP Admin Bar may complicate that as well – setting a top: 0; attribute on the header element would work for logged-out users, but would cause some overlapping for logged-in users.

Disabling the subscription gifting banner is the easiest workaround.

github-actions[bot] commented 1 year ago

Support References

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

cuemarie commented 1 year ago

πŸ“Œ SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

πŸ“Œ FINDINGS/SCREENSHOTS/VIDEO

AT Example - Shoreditch Theme

https://user-images.githubusercontent.com/27249804/224112887-fd8f9867-bc21-4e11-bc07-cc1a70257f4c.mp4

Simple Example - Stratford theme

https://user-images.githubusercontent.com/27249804/224111406-5ae85e70-3353-4328-abf4-fffacc776598.mov

πŸ“Œ ACTIONS