navbar mobile

src/components/navigation/www/navigation.jsx

@@ -248,7 +248,8 @@ var Navigation = React.createClass({
                                 <a className={dropdownClasses}
                                     href="#" onClick={this.handleAccountNavClick}>
                                     <Avatar src={this.props.session.session.user.thumbnailUrl} alt="" />
-                                    {this.props.session.session.user.username}
+                                    {this.props.layout == 'COLS8' || this.props.layout == 'COLS12' ?
+                                        this.props.session.session.user.username : ''}
                                 </a>
                                 <Dropdown
                                         as="ul"
@@ -302,7 +303,7 @@ var Navigation = React.createClass({
                                     isOpen={this.state.registrationOpen}
                                     onRequestClose={this.closeRegistration}
                                     onRegistrationDone={this.completeRegistration} />,
-                            <li className="link login-item" key="login">
+                            <li className="link right login-item" key="login">
                                 <a
                                     href="#"
                                     onClick={this.handleLoginClick}

src/components/navigation/www/navigation.scss

@@ -228,34 +228,91 @@
 }
 //4 columns
 @media only screen and (max-width: $mobile - 1) {
-    #navigation .inner > ul > li {
-        &.create,
-        &.explore,
-        &.discuss,
-        &.help,
-        &.search {
-            display: none;
+    #navigation .inner {
+        width: $cols4;
+
+        > ul > li {
+            &.create,
+            &.explore,
+            &.discuss,
+            &.help,
+            &.search,
+            &.mystuff {
+                display: none;
+            }
+
+            &.login-item {
+                margin-left: 0;
+            }
+
+            &.account-nav {
+                margin-left: 0;
+
+                > a {
+                    .avatar {
+                        margin-right: 0;
+                    }
+
+                    &:after {
+                        display: none;
+                    }
+                }
+            }
         }
     }
 }
 
+
 //6 columns
 @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
-    #navigation .inner > ul > li {
-        &.explore,
-        &.discuss,
-        &.search {
-            display: none;
+    #navigation .inner {
+        width: $cols6;
+
+        > ul > li {
+            &.explore,
+            &.discuss,
+            &.search,
+            &.mystuff {
+                display: none;
+            }
+
+            &.login-item {
+                margin-left: 0;
+            }
+
+            &.account-nav {
+                margin-left: 0;
+
+                > a {
+                    .avatar {
+                        margin-right: 0;
+                    }
+
+                    &:after {
+                        display: none;
+                    }
+                }
+            }
         }
     }
 }
 
 //8 columns
 @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
-    #navigation .inner > ul > li {
-        &.explore,
-        &.search {
-            display: none;
+    #navigation .inner {
+        width: $cols8;
+
+        > ul > li {
+            &.explore,
+            &.search,
+            &.mystuff {
+                display: none;
+            }
+
+            &.login-item,
+            &.account-nav {
+                margin-left: 0;
+            }
         }
     }
 }