Update to react-bootstrap 0.28.1 and widen react nav

+ Moved away from deprecated navbar components and props
+ Removed mixin from NavItem
+ Updated stylesheet so the `.container` react-bootstrap adds doesn't impact nav positioning

common/app/components/Nav/Nav.jsx

@@ -2,9 +2,8 @@ import React, { PropTypes } from 'react';
 import { LinkContainer } from 'react-router-bootstrap';
 import {
   Col,
-  CollapsibleNav,
   Nav,
-  NavBrand,
+  NavbarBrand,
   Navbar,
   NavItem
 } from 'react-bootstrap';
@@ -24,12 +23,10 @@ const logoElement = (
   </a>
 );
 
-const toggleButton = (
-  <button className='hamburger'>
+const toggleButtonChild = (
     <Col xs={ 12 }>
       <span className='hamburger-text'>Menu</span>
     </Col>
-  </button>
 );
 
 function getDashedName() {
@@ -61,7 +58,7 @@ export default React.createClass({
             key={ content }
             to={ link }>
             <NavItem
-              target={ target || null } >
+              target={ target || null }>
               { content }
             </NavItem>
           </LinkContainer>
@@ -100,10 +97,11 @@ export default React.createClass({
       return null;
     }
     return (
-      <NavItem
+      <FCCNavItem
+        className='brownie-points-nav'
         href={ '/' + username }>
         [ { points } ]
-      </NavItem>
+      </FCCNavItem>
     );
   },
 
@@ -123,7 +121,7 @@ export default React.createClass({
     } else {
       return (
         <FCCNavItem
-          className='btn signup-btn signup-btn-nav'
+          className='btn signup-btn signup-btn-nav signin-button-nav'
           eventKey={ 2 }
           href='/login'>
           Sign In
@@ -138,21 +136,20 @@ export default React.createClass({
     return (
       <Navbar
         className='nav-height'
-        fixedTop={ true }
-        toggleButton={ toggleButton }
-        toggleNavKey={ 0 }>
-        <NavBrand>{ logoElement }</NavBrand>
-        <CollapsibleNav eventKey={ 0 }>
+        fixedTop={ true }>
+        <NavbarBrand>{ logoElement }</NavbarBrand>
+        <Navbar.Toggle children={ toggleButtonChild } />
+        <Navbar.Collapse eventKey={ 0 }>
           <Nav
             className='hamburger-dropdown'
             navbar={ true }
-            right={ true }>
+            pullRight={ true }>
             { this.renderLearnBtn() }
             { this.renderLinks() }
             { this.renderPoints(username, points) }
             { this.renderSignin(username, picture) }
           </Nav>
-        </CollapsibleNav>
+        </Navbar.Collapse>
       </Navbar>
     );
   }