fix(dropdown): Fix dropdown styles

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>
         )

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>
         )

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;
+      }
+    }
+
+  }
+
+}