mobile improvements

app/assets/stylesheets/new_nav.scss

@@ -50,15 +50,19 @@ header.navbar-gitlab-new {
   }
   .navbar-collapse {
+    padding-left: 0;
     color: $white-light;
   }
   .container-fluid {
     .navbar-toggle {
+      min-width: 45px;
       padding: 6px $gl-padding;
       margin-right: -5px;
+      font-size: 14px;
+      text-align: center;
       color: currentColor;
-      border-left: 1px solid $white-light;
+      border-left: 1px solid lighten($purple-700, 10%);
       &:hover,
       &:focus,
@@ -68,14 +72,6 @@ header.navbar-gitlab-new {
       }
     }
-    .navbar-toggle-left {
-      right: 0;
-      margin-right: 0;
-      margin-left: -16px;
-      border-left: 0;
-      border-right: 1px solid $white-light;
-    }
-
     .navbar-nav {
       @media (max-width: $screen-xs-max) {
         padding-right: 10px;
@@ -116,7 +112,7 @@ header.navbar-gitlab-new {
     > a {
       display: block;
-      padding: 16px 9px 13px;
+      padding: 16px 10px 13px;
       font-size: 13px;
       color: currentColor;
       border-bottom: 3px solid transparent;
@@ -135,6 +131,10 @@ header.navbar-gitlab-new {
   }
 }
+.header-user .dropdown-menu-nav {
+  margin-top: 4px;
+}
+
 .search {
   form {
     border-color: $purple-800;

app/views/layouts/header/_new.html.haml

@@ -16,10 +16,6 @@
         - else
           = render "layouts/nav/new_explore"
-      %button.navbar-toggle.navbar-toggle-left.hide.hidden-sm.hidden-md.hidden-lg.js-navbar-toggle-left{ type: 'button' }
-        %span.sr-only Toggle navigation
-        = icon('chevron-left')
-
       .navbar-collapse.collapse
         %ul.nav.navbar-nav
           %li.hidden-sm.hidden-xs
@@ -84,9 +80,10 @@
               %div
                 = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-success'
-      %button.navbar-toggle.hidden-sm.hidden-md.hidden-lg.js-navbar-toggle-right{ type: 'button' }
+      %button.navbar-toggle.hidden-sm.hidden-md.hidden-lg{ type: 'button' }
         %span.sr-only Toggle navigation
-        = icon('chevron-right')
+        = icon('ellipsis-v', class: 'js-navbar-toggle-right')
+        = icon('times', class: 'js-navbar-toggle-left', style: 'display: none;')
       = yield :header_content