Menu items letters drop to second row on smaller screens (~768px)

[richard-rapenne]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

On smaller screen resolutions (for example 768px - tablets), or if you zoom in on the page, menu items letters drop to a second row. The issue is visible on orange.com and also on the Brand Site : brand.orange.com

Reduced test cases

brand.orange.com
orange.com

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Boosted are you using?

5.3.2

[julien-deramond]

Thanks for reporting this issue @OriginalUserName
I've created a CodePen with your menu based on the Orange navbar provided in our documentation for Boosted v5.3: https://codepen.io/julien-deramond/pen/YzMgeoe.
The nav links should appear only from 1024px. At 768px, here's the rendering:

Could you please double-check your DOM and the classes used? It's possible that they are not updated.

[richard-rapenne]

Hi @julien-deramond,

We can see this issue happening on live orange.com website as well. Does that mean they aren't using the proper classes as well? We have a similar integration on the Brand Site.

[julien-deramond]

Yes, it looks like the DOM and classes from both websites is closer to Boosted v4 (with the Orange megamenu) than Boosted v5.
For example, I can spot at least the usage of .navbar-expand-md which is now .navbar-expand-lg.

[richard-rapenne]

Hi @julien-deramond, we are already using the class navbar-expand-lg on the Brand Site, so that means we should be using the correct markup for Boosted V5?