Navigation broke on Team offer page in French

Hello,

When I go to the page https://www.cloudflare.com/fr-fr/teams/ , I can’t navigate to the sub-menu in the menu for this offer (nav element in .site-content) in french.

The problem is a classical example of internationalization problem :

  • the total lengh of texts of all entries are larger than the designer allow for
  • because you have an overflow-x:auto CSS rule, you have a scroll bar
  • because of this scrollbar, when a user hovers an entry in the menu we can’t click on a sub-menu entry because the hover event disappear when we hover over the scrollbar and the sub-menu disappear.

You can see the scrollbar :

Ways to fix :

  • test and change the content of the menu to fit the page
  • reduce the gap between entries
  • rethink the choice of an horizontal navigation (you may bump against this problem with over language :slight_smile: )