Remove the c-header__show-text class from the Nature Header

[amyhupe]

In the Nature Header component we include the class c-header__show-text.

This is used with a <span> to shorten some of our navigation menu text labels on mobile.

For example, the "Explore content" navigation link in the nature.com header becomes "Content" on mobile, as follows:

<span><span class="c-header__show-text">Explore</span> content</span>

I suggest we stop doing this and remove the class from the header's stylesheet because:

• we should always design the shortest understandable text label. Using the above example, if "Content" is good enough on mobile, we should use it on desktop, too. If users need "Explore content" to understand it, we should use that on mobile
• we shouldn't solve design problems by changing content
• it complicates the code unnecessarily
• it's not really in the spirit of progressive enhancement

This may prompt questions about how the navigation menu should behave on mobile. Currently, when the menu is wider than the viewport, it wraps:

I've talked this over with @benjclark and @foxintherain and we agreed to raise this issue to discuss:

• removing the c-header__show-text class`
• if we want to make any changes to the labels on nature.com / other places using the header
• if we're happy with the behaviour on smaller screens

[foxintherain]

Will organize a chat with Rosario (UX from Pandora) to discuss what we are thinking

[sturobson]

There has been no update on this issue for 30 days. It is now marked as "stale". If you think this issue is still relevant and needs attention then reply with an update. If there is no update in 14 days, this issue will be closed.