From d67d02a344647dec47a2c45488477aad40cc6975 Mon Sep 17 00:00:00 2001
From: Stuart Taylor <staylor1012@gmail.com>
Date: Tue, 13 Mar 2018 21:03:47 +0000
Subject: [PATCH] fix(dropdown): Fix dropdown styles

---
 common/app/Nav/MediumNav.jsx |  6 ++----
 common/app/Nav/SmallNav.jsx  | 28 +++++++++++++---------------
 common/app/Nav/nav.less      | 21 +++++++++++++++++++++
 3 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/common/app/Nav/MediumNav.jsx b/common/app/Nav/MediumNav.jsx
index 153cae84e1..bb5004121c 100644
--- a/common/app/Nav/MediumNav.jsx
+++ b/common/app/Nav/MediumNav.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Media from 'react-media';
-import { Col, Navbar, Row } from 'react-bootstrap';
+import { Navbar, Row } from 'react-bootstrap';
 import FCCSearchBar from 'react-freecodecamp-search';
 import { NavLogo, BinButtons, NavLinks } from './components';
 
@@ -30,15 +30,13 @@ function MediumNav({ clickOnLogo, clickOnMap, shouldShowMapButton, panes }) {
             </div>
               </Navbar.Header>
           </Row>
-          <Row>
-            <Col xs={ 12 }>
+          <Row className='collapse-row'>
             <Navbar.Collapse>
                 <NavLinks
                   clickOnMap={ clickOnMap }
                   shouldShowMapButton={ shouldShowMapButton }
                 />
               </Navbar.Collapse>
-            </Col>
           </Row>
           </div>
         )
diff --git a/common/app/Nav/SmallNav.jsx b/common/app/Nav/SmallNav.jsx
index e6bd7d751f..f4ff42afce 100644
--- a/common/app/Nav/SmallNav.jsx
+++ b/common/app/Nav/SmallNav.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Media from 'react-media';
-import { Col, Navbar, Row } from 'react-bootstrap';
+import { Navbar, Row } from 'react-bootstrap';
 import FCCSearchBar from 'react-freecodecamp-search';
 import { NavLogo, BinButtons, NavLinks } from './components';
 
@@ -25,21 +25,19 @@ function SmallNav({ clickOnLogo, clickOnMap, shouldShowMapButton, panes }) {
             </div>
               </Navbar.Header>
           </Row>
-          <Row>
-            <Col xs={ 12 }>
+          <Row className='collapse-row'>
             <Navbar.Collapse>
-                <NavLinks
-                  clickOnMap={ clickOnMap }
-                  shouldShowMapButton={ shouldShowMapButton }
-                  >
-                  <FCCSearchBar
-                    dropdown={ true }
-                    placeholder=
-                      '&#xf002; Search 8,000+ lessons, articles, and videos'
-                  />
-                </NavLinks>
-              </Navbar.Collapse>
-            </Col>
+              <NavLinks
+                clickOnMap={ clickOnMap }
+                shouldShowMapButton={ shouldShowMapButton }
+                >
+                <FCCSearchBar
+                  dropdown={ true }
+                  placeholder=
+                    '&#xf002; Search 8,000+ lessons, articles, and videos'
+                />
+              </NavLinks>
+            </Navbar.Collapse>
           </Row>
           </div>
         )
diff --git a/common/app/Nav/nav.less b/common/app/Nav/nav.less
index 9cccb11c0d..c9a2ea8a12 100644
--- a/common/app/Nav/nav.less
+++ b/common/app/Nav/nav.less
@@ -310,3 +310,24 @@ li.nav-avatar {
   }
 
 }
+
+.collapse-row {
+  background-color: @brand-primary;
+
+  .dropdown-menu {
+
+    li a {
+      display: flex;
+      justify-content: center;
+      background-color: #eeeeee;
+      color: @brand-primary !important;
+
+      &:hover {
+        background-color: @brand-primary !important;
+        color: #eeeeee !important;
+      }
+    }
+
+  }
+
+}