[Universal banner]: Spec for how Masthead may appear below banner (desktop, mobile)

Overview

This problem was seen when the Cloud MH was introduced on the v19a page and the yellow translation banner appears.

• This behavior should be resolved in the Universal banner designs and func specs. This FR has been linked to the Universal Banner epic (#6547) and included in sprint 21-10 for the designer working on the functional specs in that sprint to revisit the designs to be sure that this problem is addressed.

The problem

The current masthead doesn’t seem to account for banners above and overlaps them. An issue was brought up with when the cloud-masthead is used with the locale banner: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7211

Currently the Cloud pages override the position: fixed style of the masthead by setting to position: static when banner is seen, and setting it back to position: fixed when banner is scrolled out of view. The Carbon THINK banner Ryan had created uses similar logic to override our masthead positioning.

The solution

Detect when there is a banner above the masthead and correct the position to static. When banner is scrolled out of view, the masthead can be set to fixed. Not sure if this needs to be separated into a wrapper component or can be part of the masthead?

Ensure that the scrolling behavior of the masthead maintains the expected behavior when there is an L1 / TOC / L1 & TOC.

Code of Conduct

• I agree to follow this project’s Code of Conduct
• I checked the current issues for duplicate issues

[proeung]

Remove the locale switch banner (People do intend to stay on the page they want to be on. The goal of the yellow locale banner is to change the page to a local page, which means it’s not very successful.)

@shixiedesign I like your proposal of removing the locale switch banner as well, however, this looks to be a feature that was added by the Drupal Core team and I’m not sure if they’re in the position to abandon this just yet. However, looking ahead into the future of ibm.com with the migration to AEM, it might be good to inform that team of whether this feature will be migrated there, if so, we should inform them of some of the pain points we discovered and purposed a solution that wouldn’t conflict with the masthead.

Universal banner likely need to contain the logic of manipulating the masthead position

I agree as we need to be able to calculate the correct value of the masthead top offset position in the event where folks are loading announcement banner (eg. Think, etc) above the masthead. Perhaps this is something we can account for in the code base, but in the overall page experience guidance as well?

[shixiedesign]

TY @RobertaJHahn Re @photodow for now, I won’t jump to say it’s a functional change to the banner because I’m unsure where the calculation / logic has to be added for the masthead and mega menu to be aware of the banner’s existence. Let’s check with devs on Nov 8. Wherever the logic is added, we should update the func spec to mention it I think.