Update navbar styling

Author: systimotic

assets/FCC-logo-white.png

@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import Navbar from 'react-bootstrap/lib/Navbar';
 import FormControl from 'react-bootstrap/lib/FormControl';
 
 import {
@@ -77,17 +76,15 @@ class SearchBar extends PureComponent {
       searchTerm
     } = this.props;
     return (
-      <div>
+      <div className='searchBar'>
         <form onSubmit={ this.handleSubmit }>
-          <Navbar.Form className='formContainer'>
-            <FormControl
-              className='input'
-              onChange={ this.handleChange }
-              placeholder='&#xf002; What would you like to know?'
-              type='text'
-              value={ searchTerm }
-            />
-          </Navbar.Form>
+          <FormControl
+            className='input'
+            onChange={ this.handleChange }
+            placeholder='&#xf002; What would you like to know?'
+            type='text'
+            value={ searchTerm }
+          />
         </form>
       </div>
     );

assets/freeCodeCamp-logo-glyph.png

@@ -38,22 +38,87 @@
 
 /* Layout */
 
-.link {
-  text-decoration: none;
-  color: #fff;
+.content {
+  margin-bottom: 50px;
 }
 
+/* NavBar */
+
 .navBar {
   background: #006400;
   display: flex;
   align-items: center;
-  /* height: 40px; */
+  min-height: 40px;
   border: none;
   border-radius: 0;
 }
 
-.content {
-  margin-bottom: 50px;
+.navContainer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+@media (min-width: 992px) {
+  .navContainer {
+    width: 970px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .navContainer {
+    width: 1170px;
+  }
+}
+
+/* Navbar logo */
+
+.logo-glyph {
+  height: 30px;
+  width: auto;
+}
+
+.logo {
+  display: none;
+}
+
+.logoContainer {
+  margin-right: 10px;
+}
+
+@media (min-width: 992px) {
+  .logo-glyph {
+    display: none;
+  }
+
+  .logo {
+    display: block;
+  }
+
+  .logoContainer {
+    margin-right: 50px;
+    width: 25%;
+  }
+}
+
+/* SearchBar */
+
+.searchBar {
+  width: 100%;
+}
+
+@media (min-width: 992px) {
+  .searchBar {
+    width: 75%;
+  }
+}
+
+.input {
+  min-width: 100%;
+  width: 100%;
+  height: 30px;
 }
 
 /* NoResults/404 */
@@ -133,17 +198,6 @@
   background: #eee;
 }
 
-/* SearchBar */
-
-.formContainer {
-  margin: 0;
-}
-
-.input {
-  min-width: 100%;
-  width: 100%;
-}
-
 /* SearchPage */
 
 .resultIcon {

assets/freeCodeCamp-logo.png

@@ -3,13 +3,15 @@ import PropTypes from 'prop-types';
 import Col from 'react-bootstrap/lib/Col';
 import Grid from 'react-bootstrap/lib/Grid';
 import Image from 'react-bootstrap/lib/Image';
-import Navbar from 'react-bootstrap/lib/Navbar';
 import Row from 'react-bootstrap/lib/Row';
 import Link from 'gatsby-link';
 
 import SearchBar from '../LayoutComponents/search/SearchBar.jsx';
 import SideNav from '../LayoutComponents/nav/SideNav.jsx';
 
+import logo from '../../assets/freeCodeCamp-logo.png';
+import glyph from '../../assets/freeCodeCamp-logo-glyph.png';
+
 import 'prismjs/themes/prism.css';
 import '../css/main.css';
 
@@ -20,34 +22,31 @@ const propTypes = {
 };
 
 function Layout(props) {
-
   return (
     <div>
-      <Grid fluid={ true }>
-        <Row>
-          <Navbar className='navBar'>
-            <Col md={ 3 } xs={ 12 }>
-              <Link
-                className='link'
-                to={ '/' }
-                >
-                <Image
-                  alt='freeCodeCamp logo'
-                  responsive={ true }
-                  src={
-                    'https://raw.githubusercontent.com/' +
-                    'freeCodeCamp/assets/master/assets/' +
-                    'logos/FCC-logo-white.png'
-                    }
-                />
-              </Link>
-            </Col>
-            <Col md={ 9 } xs={ 12 }>
-              <SearchBar />
-            </Col>
-          </Navbar>
-        </Row>
-      </Grid>
+      <nav className='navbar navBar'>
+        <div className='navContainer'>
+          <div className='logoContainer'>
+            <Link
+              className='link'
+              to={ '/' }
+              >
+              <Image
+                alt='freeCodeCamp logo'
+                className='logo'
+                responsive={ true }
+                src={ logo }
+              />
+              <Image
+                alt='freeCodeCamp logo'
+                className='logo-glyph'
+                src={ glyph }
+              />
+            </Link>
+          </div>
+          <SearchBar />
+        </div>
+      </nav>
       <Grid>
         <Row>
           <Col md={ 4 }>