included my navbar

src/App.css

@@ -26,3 +26,32 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.navText{
+  font-family: 'Roboto', sans-serif;
+  font-size: 11px;  
+  color: black;
+}
+
+.navbar-default .navbar-brand {
+    color: black;
+}
+.navbar-default .navbar-nav > li > a {
+    color: black;
+}
+
+.logo{
+    /* width: 25%; */
+    max-width:55px;
+  cursor: pointer;
+  border: none !important;
+}
+
+.hoverBorder:hover{
+    border-bottom: 1px;
+}
+
+nav.navbar.navbar-default{
+    border-color: white;
+    background-color: white;
+}

src/App.js

@@ -5,6 +5,7 @@ import Home from './pages/Home.js';
 import Members from './pages/Members.js';
 import Officers from './pages/Officers.js';
 import { Switch, Route } from 'react-router-dom';
+import Navbar2 from './components/navbar2.js';
 
 const Main = () => (
   <main>
@@ -21,6 +22,7 @@ class App extends Component {
     return (
       <div>
         <Navbar/>
+        <Navbar2/>
         <Main/>
       </div>
     )

src/components/navbar2.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import {Navbar, Nav, NavItem, NavDropdown} from 'react-bootstrap';
+import { IndexLinkContainer } from 'react-router-bootstrap';
+import 'bootstrap/dist/css/bootstrap.css';
+
+import logo from '../images/navbar/customlogo.jpg';
+
+// <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
+
+
+class NavBar2 extends Component {
+
+  render () {
+  	return (
+		  <Navbar collapseOnSelect fluid>
+		    <Navbar.Header>
+					<IndexLinkContainer to="/">
+
+		      	<img src={logo}  className="d-inline-block align-top logo" alt={logo}/> 
+
+					</IndexLinkContainer>
+
+		      <Navbar.Toggle />
+
+		    </Navbar.Header>
+		    <Navbar.Collapse>
+
+		    <Nav pullRight>
+
+		      <NavDropdown className="navText hoverBorder" eventKey={1} title="ABOUT US" id="basic-nav-dropdown">	
+						<IndexLinkContainer to="/officers">
+							<NavItem className="navText hoverBorder" eventKey={2} >Officers</NavItem>
+						</IndexLinkContainer>
+						<IndexLinkContainer  to="/photos">
+							<NavItem className="navText hoverBorder" eventKey={3}>Photos</NavItem>
+						</IndexLinkContainer>
+		      </NavDropdown>
+
+					<IndexLinkContainer to="/members">
+						<NavItem className="navText hoverBorder" eventKey={4} >MEMBERS</NavItem>
+					</IndexLinkContainer>
+					<IndexLinkContainer to="/join">
+						<NavItem className="navText hoverBorder" eventKey={5}>JOIN US</NavItem>
+					</IndexLinkContainer>
+					<IndexLinkContainer to="/contact">
+						<NavItem className="navText hoverBorder" eventKey={6}>CONTACT</NavItem>
+					</IndexLinkContainer>
+
+		    </Nav> 
+		    </Navbar.Collapse>
+		  </Navbar>
+		  );
+	}
+}
+
+export default NavBar2;