Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue


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:

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.

Screen Shot 2021-09-21 at 4 04 31 PM

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (7 by maintainers)

github_iconTop GitHub Comments

proeungcommented, Oct 20, 2021

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 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?

shixiedesigncommented, Nov 3, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

What Are The Standard Banner Ad Sizes in 2022 - Creatopy
Top Performing Banner Ad Sizes in 2022 ; 336 x 280, Large rectangle, 150 KB ; 728 x 90, Leaderboard, 150 KB ;...
Read more >
YouTube Banner—size, dimensions, format + latest tips
Banner image guidelines for desktop · Recommended YouTube banner size is 2560 x 1440 pixels · YouTube's minimum accepted dimensions: 2048 x 1152 ......
Read more >
Masthead Banner and Touts - IBM
These graphics and text can be created independently, uploaded, and changed as needed. Multiple banners can be uploaded and will rotate automatically each...
Read more >
Banner Ad Sizes: All You Need to Know - Kinsta
Check out the most common and best-performing banner ad sizes for all the major networks (Google, Facebook, Instagram).
Read more >
Best Mobile Ad Sizes to implement in 2023 [Don't miss out]
Let's take a look at some of the best mobile ad sizes for publishers in 2023 and optimization tips you can start implementing...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found