diff --git a/assets/less/classes/header.less b/assets/less/classes/header.less
index 21e86ac1..be3bcae6 100644
--- a/assets/less/classes/header.less
+++ b/assets/less/classes/header.less
@@ -91,15 +91,12 @@
             font-size: 1.6em;
             line-height: 1.5em;
             margin-top: 4px;
+            width: 100%;
+            background: var(--header-accent-colour);
 
             &-toggle:checked ~ .header__menu {
                 display: block;
             }
-        }
-
-        @media (max-width: @site-mobile-width) {
-            width: 100%;
-            background: var(--header-accent-colour);
 
             &__item:not(:last-child) {
                 border-bottom: 1px solid var(--header-accent-colour);
@@ -119,7 +116,9 @@
                 text-align: center;
                 transition: background-color .2s;
 
-                &:hover {
+                &:hover,
+                &:active,
+                &:focus {
                     background-color: var(--header-accent-colour);
 
                     .header__submenu {
@@ -165,7 +164,8 @@
             box-shadow: 0 1px 2px var(--header-accent-colour);
             transition: transform .2s;
 
-            &:hover {
+            &:hover,
+            &:focus {
                 transform: scaleY(1);
             }
 
@@ -182,7 +182,6 @@
     &__user {
         flex: 0 0 auto;
         display: flex;
-        flex-direction: row-reverse;
         order: 3;
         align-items: center;
 
@@ -204,6 +203,14 @@
             width: 60px;
             height: 60px;
             margin-left: 5px;
+            transition: box-shadow .2s;
+            box-shadow: 0 0 4px #111;
+
+            &:hover,
+            &:active,
+            &:focus {
+                box-shadow: 0 0 4px var(--header-accent-colour);
+            }
 
             @media (max-width: @site-mobile-width) {
                 display: none;
diff --git a/templates/_layout/header.twig b/templates/_layout/header.twig
index 4ffdc42d..9cceb620 100644
--- a/templates/_layout/header.twig
+++ b/templates/_layout/header.twig
@@ -45,13 +45,13 @@
 
         {{ input_checkbox_raw('', false, 'header__user-toggle', '', false, {'id':'toggle-mobile-header-user'}) }}
         <div class="header__user">
-
             {% if current_user is defined %}
-                <a href="/profile.php?u={{ current_user.user_id }}" class="avatar header__user__avatar"
-                    style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');" title="{{ current_user.username }}"></a>
+                <a href="/profile.php?u={{ current_user.user_id }}" title="Profile" class="header__user__button">
+                    <i class="fas fa-user fa-fw"></i>
+                </a>
 
-                <a href="/auth.php?m=logout&amp;s={{ csrf_token('logout') }}" title="Log out" class="header__user__button">
-                    <i class="fas fa-sign-out-alt fa-fw"></i>
+                <a href="/settings.php" title="Settings" class="header__user__button">
+                    <i class="fas fa-cog fa-fw"></i>
                 </a>
 
                 {% if has_manage_access %}
@@ -66,24 +66,23 @@
                     {% endif %}
                 {% endif %}
 
-                <a href="/settings.php" title="Settings" class="header__user__button">
-                    <i class="fas fa-cog fa-fw"></i>
+                <a href="/auth.php?m=logout&amp;s={{ csrf_token('logout') }}" title="Log out" class="header__user__button">
+                    <i class="fas fa-sign-out-alt fa-fw"></i>
                 </a>
 
-                <a href="/profile.php?u={{ current_user.user_id }}" title="Profile" class="header__user__button">
-                    <i class="fas fa-user fa-fw"></i>
-                </a>
+                <a href="/profile.php?u={{ current_user.user_id }}" class="avatar header__user__avatar"
+                    style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');" title="{{ current_user.username }}"></a>
             {% else %}
-                <a href="/auth.php?m=login" class="avatar header__user__avatar"
-                    style="background-image:url('/profile.php?m=avatar');"></a>
+                <a href="/auth.php?m=register" title="Register" class="header__user__button">
+                    <i class="fas fa-user-plus fa-fw"></i>
+                </a>
 
                 <a href="/auth.php?m=login" title="Log in" class="header__user__button">
                     <i class="fas fa-sign-in-alt fa-fw"></i>
                 </a>
 
-                <a href="/auth.php?m=register" title="Register" class="header__user__button">
-                    <i class="fas fa-user-plus fa-fw"></i>
-                </a>
+                <a href="/auth.php?m=login" class="avatar header__user__avatar"
+                    style="background-image:url('/profile.php?m=avatar');"></a>
             {% endif %}
         </div>
     </div>