add lang selector to fix breakpoints
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:
- Select
English
from the language selector in Buyer Experience - Verify that the HTML
hreflang
is set toen
. - Begin shrinking the browser window. At ~1025px, the desktop nav will change to the mobile nav
- Select
French, Japanese, or German
from the language selector. - Verify that the HTML
hreflang
is set for the language you have selected. - 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.