Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Masthead / mega menu – content overlapping #3519

Closed
oliviaflory opened this issue Aug 11, 2020 · 1 comment
Closed

Masthead / mega menu – content overlapping #3519

oliviaflory opened this issue Aug 11, 2020 · 1 comment
Assignees
@annawen1
Labels
adopter support bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package severity 1 Affects major functionality, no workaround
Milestone
Sprint 20-16

Comments

@oliviaflory
Copy link
Contributor

oliviaflory commented Aug 11, 2020 •
edited
Loading

Detailed description

Describe in detail the issue you're having.

The COVID-19 menu and Search are overlapping in the masthead between 1056 and 1170px 1120px wide.
Note: Problematic breakpoint will be different with Platform name variation depending on content length

MM stack Aug-11-2020 13-02-56

Screen Shot 2020-08-11 at 1 00 31 PM

Screen Shot 2020-08-11 at 1 00 59 PM

Is this a feature request (new component, new icon), a bug, or a general
issue?

Bug

Is this issue related to a specific component?

Masthead

What did you expect to happen? What happened instead? What would you like to
see changed?

No overlap of content.

Ideas for solution:

  1. have masthead collapse to hamburger before 1056px breakpoint, guessing it would need to be aware of when the content starts to overlap.

  2. Add in scrolling option when content overlaps

  3. Shrink type size and icon sizes to 14px to accommodate width issue. However, this might not work for menus with the platform in the future.

What browser are you working in?

Chrome

What version of the IBM.com Library are you using?

Latest canary, but also see it in latest stable

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

August release on US Homepage

Steps to reproduce the issue

  1. View masthead
  2. scale browser
  3. Step three
  4. etc.

Additional information

  • Screenshots or code
  • Notes
@oliviaflory oliviaflory added the bug Something isn't working label Aug 11, 2020
@oliviaflory oliviaflory changed the title Masthead – content overlapping Masthead / mega menu – content overlapping Aug 11, 2020
@oliviaflory
Copy link
Contributor Author

After speaking with @wonilsuhibm about this, we think the best solution would be option 1. having the masthead be aware of the content and allowing the menu items to collapse into a hamburger menu before any overlap happens, like in Northstar masthead.

Reasoning:

  1. Translation: we have no idea how long or short the menu items will get when they are translated and it's risky to not accommodate for flexible lengths of content.
  2. The geos have the ability to customize some of their content, so it needs to be flexible
  3. In the future the COVID-19 menu could change to something else (whatever IBM wants to promote at the time), more flexible content.

cc @jeffchew want to make you aware of this. Out of all the bugs I've created around mega menu this one lands in top 3 as far as prioritization.

@RobertaJHahn RobertaJHahn added the severity 1 Affects major functionality, no workaround label Aug 12, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-16 milestone Aug 12, 2020
@RobertaJHahn RobertaJHahn added adopter support adopter: reboot package: react Work necessary for the Carbon for IBM.com react components package dev Needs some dev work labels Aug 12, 2020
@annawen1 annawen1 mentioned this issue Aug 13, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Aug 14, 2020
@annawen1
fix(MegaMenu): prevent menu items from overlapping (#3565)
8bd6375 
### Related Ticket(s)

Masthead / mega menu – content overlapping #3519

### Description

Menu Items were overlapping at certain breakpoint. Add utility to calculate total width of the masthead and set the media query to hide and show elements.

![Aug-13-2020 00-08-28](https://user-images.githubusercontent.com/54281166/90093310-4ae96a80-dcf9-11ea-89bb-7bdff247ea80.gif)


### Changelog

**New**

- `calculateTotalWidth` utility to find total width of elements passed in.
- use the total width calculated to set the media query by creating a `style` tag within the `<head>` element to hide/show items


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
@RobertaJHahn RobertaJHahn mentioned this issue Aug 25, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@annawen1 annawen1

Labels
adopter support bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package severity 1 Affects major functionality, no workaround
Projects
None yet
Milestone
Sprint 20-16
Development

No branches or pull requests
6 participants
@jeffchew @ljcarot @oliviaflory @RobertaJHahn @annawen1 @andysherman2121