Adding scrollbar to header when it overflows

[maazadeeb]

Motivation

Fixes #441

Test Plan

1. Add many dummy entries into the siteConfig.js.
2. Use the Chrome devtools' "Toggle Device Mode" to simulate various responsive sizes. Note: Just make sure you refresh the page once when you switch to mobile mode. This guarantees that the page is loaded in the simulated mobile mode and any old CSS effects from the desktop mode are not into play.

cc @JoelMarcey

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[JoelMarcey]

This is great @maaz93. Thanks so much!

[JoelMarcey]

<3

[maazadeeb]

Awesome! Will wait for the next release to update the Babel website.

[JoelMarcey]

@maaz93 Hi. I commented on #445 that I had to revert this :( It broke Algolia search. I am thinking we can only overflow when the header links are on their own row like in your original screenshot here? So we just need to put the overflow in the @media only place.

[maazadeeb]

Oops. That's a bit weird. I put a overflow-x and there's a vertical scroll. I'll look at it. Can we re-open the issue?

[JoelMarcey]

Issue is reopened.