Change global menu content on small screen

app/assets/stylesheets/header.scss

@@ -147,6 +147,28 @@
     .nav-badges .dropdown-menu {
       width: 300px;
     }
+
+    #user_menu .dropdown-menu {
+      display: block;
+      position: static;
+      width: 100%;
+      background-color: transparent;
+      box-shadow: none;
+      border: 0;
+      padding: 0;
+      margin-top: -8px; // To compensate parent ul margin
+
+      a {
+        color: #9d9d9d;
+        font-weight: bold;
+        padding: 10px 15px;
+
+        &:hover {
+          color: #fff;
+          background-color: transparent;
+        }
+      }
+    }
   }
 
   @media (min-width: $grid-float-breakpoint) {

app/assets/templates/header_tpl.jst.hbs

@@ -69,7 +69,7 @@
 
           <ul class="nav navbar-nav navbar-right">
             <li class="dropdown" id="user_menu">
-              <a href="{{urlTo "person" current_user.guid}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+              <a href="{{urlTo "person" current_user.guid}}" class="dropdown-toggle hidden-xs hidden-sm" data-toggle="dropdown" role="button" aria-expanded="false">
                 <span class="user-avatar pull-left">
                   {{{personImage current_user "small"}}}
                 </span>