diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ecb58d2f1..06fdfd396 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1139,8 +1139,13 @@ form {
     color: #ecf00b;
     font-size: rem-calc(10);
     position: absolute;
-    right: 8px;
+    left: 12px;
     top: 6px;
+
+    @include breakpoint(medium) {
+      left: auto;
+      right: 8px;
+    }
   }
 }
 
diff --git a/app/views/devise/menu/_login_items.html.erb b/app/views/devise/menu/_login_items.html.erb
index ac2f7e33c..186597bc6 100644
--- a/app/views/devise/menu/_login_items.html.erb
+++ b/app/views/devise/menu/_login_items.html.erb
@@ -6,8 +6,14 @@
         <span class="icon-circle" aria-hidden="true"></span>
         <span class="icon-notification" aria-hidden="true" title="<%= t('layouts.header.new_notifications', count: current_user.notifications_count).html_safe %>">
         </span>
+        <small class="show-for-small-only">
+          <%= t('layouts.header.new_notifications', count: current_user.notifications_count).html_safe %>
+        </small>
       <% else %>
         <span class="icon-no-notification" aria-hidden="true" title="<%= t('layouts.header.no_notifications') %>"></span>
+        <small class="show-for-small-only">
+          <%= t('layouts.header.no_notifications') %>
+        </small>
       <% end %>
     <% end %>
   </li>