Skip to content

add lang selector to fix breakpoints

Megan Filo requested to merge fix-nav-breakpoints-by-locale into main

Closes buyer-experience#3026 (closed)

Changes in this MR

The English and non-English navigation breakpoints became buggy with the switch to putting navigation content in Contentful and dropping down to Buyer Experience. There was functionality that waited for the locale switch and added a necessary CSS class on the English navigation.

This MR introduces the use of the :lang() CSS selector, which utilizes the lang="" attribute in an HTML document. Within our meta tag builder functions in Buyer Experience, there is a function that sets the HTML lang attribute. This works nicely with this added CSS selector in our navigation!

To test:

  1. Select English from the language selector in Buyer Experience
  2. Verify that the HTML hreflang is set to en.
  3. Begin shrinking the browser window. At ~1025px, the desktop nav will change to the mobile nav
  4. Select French, Japanese, or German from the language selector.
  5. Verify that the HTML hreflang is set for the language you have selected.
  6. Begin shrinking the browser window. At ~1200px, the desktop nav will change to the mobile nav.

Verified and tested as part of this review app in BE: buyer-experience!3161 (comment 1623159804)

You cannot test this properly in the navigation review app because the hreflang does not change when a language is selected.

Edited by Megan Filo

Merge request reports