diff --git a/common/app/components/Nav/Avatar-Nav-Item.jsx b/common/app/components/Nav/Avatar-Nav-Item.jsx
new file mode 100644
index 0000000000..e01c9b4501
--- /dev/null
+++ b/common/app/components/Nav/Avatar-Nav-Item.jsx
@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
+
+// this is separated out to prevent react bootstrap's
+// NavBar from injecting unknown props to the li component
+export default function AvatarNavItem({ picture }) {
+ return (
+
+
+
+
+
+ );
+}
+
+AvatarNavItem.propTypes = { picture: PropTypes.string };
diff --git a/common/app/components/Nav/Nav.jsx b/common/app/components/Nav/Nav.jsx
index 7f255d1666..a3c60b4894 100644
--- a/common/app/components/Nav/Nav.jsx
+++ b/common/app/components/Nav/Nav.jsx
@@ -1,6 +1,5 @@
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
-import { Link } from 'react-router';
import { LinkContainer } from 'react-router-bootstrap';
import {
Col,
@@ -12,6 +11,7 @@ import {
import navLinks from './links.json';
import FCCNavItem from './NavItem.jsx';
+import AvatarNavItem from './Avatar-Nav-Item.jsx';
const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
@@ -188,20 +188,7 @@ export default class extends React.Component {
return null;
}
if (username) {
- return (
-