From 471c9da4d6c404459973d22c27b847f33e699c8c Mon Sep 17 00:00:00 2001
From: Hector Ramos <hramos@fb.com>
Date: Tue, 1 Aug 2017 09:47:56 -0700
Subject: [PATCH] Fix navigation menu regression on mobile

Summary:
Regression introduced in 75eb55096eff4e29321a8914980b81b97a459b70 and identified by Conor O'Donnell (https://twitter.com/ronocod/status/892400271980146689).

Verify mobile layout on iPhone 6, iPhone 7 Plus, Galaxy S5, Nexus 5.
<img width="269" alt="screen shot 2017-08-01 at 9 13 42 am" src="https://user-images.githubusercontent.com/165856/28835318-cdd20cc8-7699-11e7-9232-a657a93cfb1c.png">

Verify desktop layout at widths ranging from 400px to 1400px.

<img width="1303" alt="screen shot 2017-08-01 at 9 14 44 am" src="https://user-images.githubusercontent.com/165856/28835352-e33a97e2-7699-11e7-969e-db607e9a0162.png">
Closes https://github.com/facebook/react-native/pull/15314

Differential Revision: D5537209

Pulled By: hramos

fbshipit-source-id: 3ccf71a90dda4b9b1a059178a400bea9f253bf14
---
 website/src/react-native/css/react-native.css | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index 5636b863243bd6..4f7684bda37143 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -609,7 +609,6 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
 
 .nav-main .nav-site-wrapper {
   display: inline;
-  float: right;
 }
 
 .nav-main .nav-site-internal {
@@ -749,6 +748,13 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
     padding-bottom: 0;
     border-bottom: 0; }
 
+@media only screen and (min-width: 680px) {
+  .nav-main .nav-site-wrapper {
+    display: inline;
+    float: right;
+  }
+}
+
 @media only screen and (max-device-width: 1024px) {
   @-webkit-keyframes slide-in {
     0% {
@@ -824,7 +830,8 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   .nav-docs-section a.active {
     border-bottom-style: solid;
     border-bottom-width: 1px;
-    color: #05A5D1; } }
+    color: #05A5D1; }
+}
 
 /**
  * Multicolumn layout for phone (landscape only) & tablet (regardless its screen orientation)/