Header (global and country) shouldn't change to tablet view for screens larger than 1024px

[theadamparker]

Currently the headers lose the mega menu hover effect and switch to the collapsed menu with hamburger icon when the browser is <1440px. This should happen only for browser width <1024px. For everything >=1024px the full menu with mega menu hover effect should be used.

UPDATE: flexible top level menu is separated to its own issue: #1098 based on the agreement with Chapter 3

[theadamparker]

This will require a flexible solution for displaying menu items (particularly more than 4).

[Malakeldardiri]

Here is the link to the final Figma mock up. Thanks

https://www.figma.com/file/UimSg5ucd1QOgOz34JWpdv/Responsive-Navigation-Bar-Solutions?node-id=160%3A94875

[Jura]

Taking over for development

[paboden]

Because the css work to fix 915 was so close to some of the fixes I had to do for this task, I just addressed it all in this issue.

[Jura]

@mrelevo , please verify

[mrelevo]

verified in Dev

[mrelevo]

@paboden we just noticed that once you get into view in a browser <1440, the UNDP logo is no longer clickable. It becomes clickable again <1024.

This only occurs in the Global header

https://develop.design-system.pages.dev/iframe?args=&id=components-navigation-components-main-navigation-global-header--global-header&viewMode=story

[paboden]

@Jura @mrelevo - Created a new PR to address the logo - #1148

[Jura]

@paboden , there is another issue appeared, I'm afraid - now we are missing logo navigation (shrinking) when scrolling down the page: try https://916-fix-global-logo-link.design-system.pages.dev/?path=/story/templates-global-homepage--global-homepage for the viewport between 1024 and 1440 wide

[Jura]

@paboden , currently entire header is being shifted up on scroll there, this is not correct, only logo should contract/expand on scroll. Check the implementation for big screen (>1440) to use as an example and here is the screen recording from viewport in question with that undesired shift:

Templates._.Global.homepage.-.Global.homepage.Storybook.-.Google.Chrome.2023-03-06.11-38-54.mp4

[paboden]

Hi @Jura, This is ready to review #1148

[Jura]

@paboden , after last change the issue I reported is gone, but now Language switcher is shifted slightly up, the text is not aligned with the menu items anymore:

[theadamparker]

@paboden here's another approach at showing the misalignment issue. Note how the language switcher is sitting higher than the menu items.

You can also see this change in Chromatic

[theadamparker]

@paboden another small regression: For the Article template, the progress nav bar disappears between 1024px to 1440px.

Screen capture of the issue:

progress.bar.mov

[paboden]

@theadamparker This is ready to review again here - #1148

• I fixed the progress bar, which just needed the position from top adjusted between mobile and xlarge.
• I fixed the vertical position of the language switcher to match the position of the menu items in the global header (I also double checked the country header)

[Jura]

@mrelevo , over to you for verificaiton

[mrelevo]

Hi @paboden, all the issues have been resolved. However, a new one has been introduced. The language selector option now shows below the header

See correct behavior here

And its fine as a standalone https://develop.design-system.pages.dev/?path=/story/components-ui-components-language-switcher--language-switcher

[Jura]

@mrelevo , over to you

[mrelevo]

looks good dev

[mrelevo]

verified in storybook and Drupal DEV