diff --git a/app/assets/javascripts/navigation.js b/app/assets/javascripts/navigation.js
index 64d81fcc8..6b8a77129 100644
--- a/app/assets/javascripts/navigation.js
+++ b/app/assets/javascripts/navigation.js
@@ -32,6 +32,7 @@
           }
         });
         $('#count-notifications').hide();
+        toggleNotificationBellPosition();
       });
   }
 
@@ -46,6 +47,7 @@
         if ( data.notificationNmber > 0 ) {
           notificationCount.html(data.notificationNmber);
           notificationCount.show();
+          toggleNotificationBellPosition();
         } else {
           notificationCount.hide();
         }
@@ -54,7 +56,24 @@
     });
   }
 
+  function toggleNotificationBellPosition() {
+    var notificationCount = $('#count-notifications');
+    var button = $('#notifications-dropdown');
+
+    if ( notificationCount.is(":hidden") ) {
+      button
+        .find('.fa-bell')
+        .css('position', 'relative');
+    } else {
+      button
+        .find('.fa-bell')
+        .css('position', 'absolute');
+    }
+
+  }
+
   // init
   loadDropdownNotifications();
   loadUnseenNotificationsNumber();
+  toggleNotificationBellPosition();
 })();
diff --git a/app/assets/stylesheets/extend/bootstrap.scss b/app/assets/stylesheets/extend/bootstrap.scss
index 4159a13b1..71f3a612d 100644
--- a/app/assets/stylesheets/extend/bootstrap.scss
+++ b/app/assets/stylesheets/extend/bootstrap.scss
@@ -57,3 +57,56 @@
 .result-comment .col-xs-12 {
   float: none;
 }
+
+@media (max-width: 1000px) {
+  .navbar-header {
+    float: none;
+  }
+
+  .navbar-left,
+  .navbar-right {
+    float: none !important;
+  }
+
+  .navbar-toggle {
+    background-color: transparent;
+    background-image: none;
+    border: 1px solid transparent;
+    display: block;
+  }
+
+  .navbar-collapse {
+    border-top: 1px solid transparent;
+  }
+
+  .navbar-fixed-top {
+    border-width: 0 0 1px;
+    top: 0;
+  }
+
+  .navbar-collapse.collapse {
+    display: none !important;
+  }
+
+  .navbar-nav {
+    float: none !important;
+    margin-top: 7.5px;
+  }
+
+  .navbar-nav>li {
+    float: none;
+  }
+
+  .navbar-nav>li>a {
+    padding-bottom: 10px;
+    padding-top: 10px;
+  }
+
+  .collapse.in {
+    display: block !important;
+  }
+
+  .container {
+    width: 100%;
+  }
+}
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 491a478ad..5c37dc541 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -75,29 +75,20 @@ table {
 #notifications-dropdown {
   .fa-bell {
     font-size: 15px;
+    position: absolute;
   }
 
   #count-notifications {
     background-color: $color-theme-primary;
     border-radius: 5px;
     color: $color-wild-sand;
-    font-size: 12px;
-    font-weight: bold;
-    margin-left: 10px;
-    margin-top: -10px;
-    padding-left: 4px;
-    padding-right: 4px;
-    position: fixed;
-    z-index: 999999;
     display: none;
-  }
-}
-
-@media(max-width:768px) {
-  #count-notifications {
-    position: absolute !important;
-    margin-left: -4px !important;
-    margin-top: 10px !important;
+    font-size: 11px;
+    font-weight: bold;
+    margin-left: 12px;
+    padding: 1px 6px;
+    position: relative;
+    z-index: 999999;
   }
 }
 
@@ -131,24 +122,36 @@ table {
   }
 
   .text-center {
-    margin-left: 10px;
-    padding-top: 10px;
+    margin-left: 12px;
+  }
+
+  .avatar {
+    top: 0px;
+    margin-top: 5px;
+    height: 45px;
+    width: 45px;
   }
 
   .assignment {
     background-color: $color-theme-primary;
     border-radius: 50%;
     color: $color-wild-sand;
-    font-size: 15px;
-    padding: 7px;
+    display: block;
+    font-size: 23px;
+    height: 45px;
+    padding-top: 5px;
+    width: 45px;
   }
 
   .system_message {
     background-color: $color-theme-secondary;
     border-radius: 50%;
     color: $color-wild-sand;
-    font-size: 13px;
-    padding: 7px 10px;
+    display: block;
+    font-size: 23px;
+    height: 45px;
+    padding-top: 8px;
+    width: 45px;
   }
 
   .notifications-dropdown-header {
diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_navigation.html.erb
index e00830dc6..325b9294f 100644
--- a/app/views/shared/_navigation.html.erb
+++ b/app/views/shared/_navigation.html.erb
@@ -28,95 +28,93 @@
         <li>
           <a href="<%= projects_path %>">
             <span class="glyphicon glyphicon-home"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.projects') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.projects') %></span>
           </a>
         </li>
         <li>
           <a href="<%= protocols_path %>">
             <span class="glyphicon glyphicon-list-alt"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.protocols') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.protocols') %></span>
           </a>
         </li>
 <% if false  %>
         <li>
           <a href="#">
             <span class="glyphicon glyphicon-calendar"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.calendar') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.calendar') %></span>
           </a>
         </li>
 <% end %>
         <li>
           <a class="btn-activity" href="<%= activities_path(format: :json) %>" role="button" data-remote="true">
             <span class="glyphicon glyphicon-equalizer"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.activities') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.activities') %></span>
           </a>
         </li>
       </ul>
 
-      <div>
-        <!-- profile info -->
-        <ul class="nav navbar-nav navbar-right">
-          <li class="dropdown">
-            <a href="#"
-               id="notifications-dropdown"
-               class="dropdown-toggle"
-               data-toggle="dropdown"
-               role="button"
-               aria-haspopup="true"
-               aria-expanded="false"
-               data-href="<%= recent_notifications_url(current_user) %>">
-              <%= fa_icon 'bell'%>
-              <span id="count-notifications"
-                    data-href="<%= unseen_notification_url(current_user) %>"></span>
-            </a>
-            <ul class="dropdown-menu dropdown-notifications">
-              <li class="notifications-dropdown-header"><span><%= t('notifications.title') %></span><span class="pull-right"><%= t('nav.user.settings') %></span></li>
-              <li class="notifications-dropdown-footer">link to method goes here</li>
-            </ul>
-          </li>
-          <li class="dropdown">
-            <a href="#" id="help-link" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-              <span class="glyphicon glyphicon-info-sign"></span>
-            </a>
-            <ul class="dropdown-menu">
-              <li><%= link_to t('nav.help.tutorials'), TUTORIALS_URL, target: "_blank" %></li>
-              <li><%= link_to t('nav.help.faq'), FAQ_URL, target: "_blank" %></li>
-              <li><%= link_to t('nav.help.release_notes'), RELEASE_NOTES_URL, target: "_blank" %></li>
-              <li><%= link_to t('nav.help.support'), SUPPORT_URL, target: "_blank" %></li>
-              <li><%= link_to t('nav.help.plans'), PLANS_URL, target: "_blank" %></li>
-              <li><%= link_to t('nav.help.contact'), CONTACT_URL, target: "_blank" %></li>
-            </ul>
-          </li>
+      <!-- profile info -->
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+          <a href="#"
+             id="notifications-dropdown"
+             class="dropdown-toggle"
+             data-toggle="dropdown"
+             role="button"
+             aria-haspopup="true"
+             aria-expanded="false"
+             data-href="<%= recent_notifications_url(current_user) %>">
+            <%= fa_icon 'bell'%>
+            <span id="count-notifications"
+                  data-href="<%= unseen_notification_url(current_user) %>"></span>
+          </a>
+          <ul class="dropdown-menu dropdown-notifications">
+            <li class="notifications-dropdown-header"><span><%= t('notifications.title') %></span><span class="pull-right"><%= t('nav.user.settings') %></span></li>
+            <li class="notifications-dropdown-footer">link to method goes here</li>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a href="#" id="help-link" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            <span class="glyphicon glyphicon-info-sign"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li><%= link_to t('nav.help.tutorials'), TUTORIALS_URL, target: "_blank" %></li>
+            <li><%= link_to t('nav.help.faq'), FAQ_URL, target: "_blank" %></li>
+            <li><%= link_to t('nav.help.release_notes'), RELEASE_NOTES_URL, target: "_blank" %></li>
+            <li><%= link_to t('nav.help.support'), SUPPORT_URL, target: "_blank" %></li>
+            <li><%= link_to t('nav.help.plans'), PLANS_URL, target: "_blank" %></li>
+            <li><%= link_to t('nav.help.contact'), CONTACT_URL, target: "_blank" %></li>
+          </ul>
+        </li>
 
 
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-              <span><%= t('nav.user_greeting', full_name: current_user.full_name) %></span>
-              <%= image_tag avatar_path(current_user, :icon_small), class: "avatar" %>
-            </a>
-            <ul class="dropdown-menu">
-              <li><%= link_to t('nav.user.profile'), edit_user_registration_path %></li>
-              <li><%= link_to t('nav.user.settings'), preferences_path %></li>
-              <li role="separator" class="divider"></li>
-              <li><%= link_to t('nav.user.logout'), destroy_user_session_path, :method => :delete %></li>
-            </ul>
-          </li>
-        </ul>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            <span><%= t('nav.user_greeting', full_name: current_user.full_name) %></span>
+            <%= image_tag avatar_path(current_user, :icon_small), class: "avatar" %>
+          </a>
+          <ul class="dropdown-menu">
+            <li><%= link_to t('nav.user.profile'), edit_user_registration_path %></li>
+            <li><%= link_to t('nav.user.settings'), preferences_path %></li>
+            <li role="separator" class="divider"></li>
+            <li><%= link_to t('nav.user.logout'), destroy_user_session_path, :method => :delete %></li>
+          </ul>
+        </li>
+      </ul>
 
-        <!-- search form -->
-        <%= form_tag search_path, method: :get, id: 'search-bar', class: 'navbar-form navbar-right', role: 'search' do %>
-          <div class="form-group">
-            <div class="input-group">
-              <input class="form-control" type="text" name="q" maxlength="50" placeholder="<%= t('nav.search') %>">
-              <span class="input-group-btn">
-                <button id="search-button" class="btn btn-default" type="submit">
-                  <span class="glyphicon glyphicon-search"></span>
-                </button>
-              </span>
-            </div>
+      <!-- search form -->
+      <%= form_tag search_path, method: :get, id: 'search-bar', class: 'navbar-form navbar-right', role: 'search' do %>
+        <div class="form-group">
+          <div class="input-group">
+            <input class="form-control" type="text" name="q" maxlength="50" placeholder="<%= t('nav.search') %>">
+            <span class="input-group-btn">
+              <button id="search-button" class="btn btn-default" type="submit">
+                <span class="glyphicon glyphicon-search"></span>
+              </button>
+            </span>
           </div>
-        <% end %>
-      </div>
+        </div>
+      <% end %>
     </div>
     <% end %>