diff --git a/app/assets/stylesheets/sections/header.scss b/app/assets/stylesheets/sections/header.scss
index f8da4f0f87b..06709bd7ef6 100644
--- a/app/assets/stylesheets/sections/header.scss
+++ b/app/assets/stylesheets/sections/header.scss
@@ -273,3 +273,9 @@ header {
     }
   }
 }
+
+@media (max-width: $screen-xs-max) {
+  #nprogress .spinner {
+    right: 35px !important;
+  }
+}
diff --git a/app/views/layouts/_public_head_panel.html.haml b/app/views/layouts/_public_head_panel.html.haml
index 99e11cd2b5c..63992a22f32 100644
--- a/app/views/layouts/_public_head_panel.html.haml
+++ b/app/views/layouts/_public_head_panel.html.haml
@@ -8,11 +8,15 @@
         %span.separator
       %h1.title= title
 
-      .pull-right
+      %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
+        %span.sr-only Toggle navigation
+        %i.icon-reorder
+
+      .pull-right.hidden-xs
         = link_to "Sign in", new_session_path(:user), class: 'btn btn-sign-in btn-new'
 
-      %ul.nav.navbar-nav
-        %li
-          %a
-            %div.hide.turbolink-spinner
-              %i.icon-refresh.icon-spin
+      .navbar-collapse.collapse
+        %ul.nav.navbar-nav
+          %li.visible-xs
+            = link_to "Sign in", new_session_path(:user)
+
diff --git a/app/views/layouts/public_projects.html.haml b/app/views/layouts/public_projects.html.haml
index cf4ca9c7a84..2a9230244f8 100644
--- a/app/views/layouts/public_projects.html.haml
+++ b/app/views/layouts/public_projects.html.haml
@@ -4,7 +4,7 @@
   %body{class: "#{app_theme} application", :'data-page' => body_data_page}
     = render "layouts/broadcast"
     = render "layouts/public_head_panel", title: project_title(@project)
-    %nav.main-nav
+    %nav.main-nav.navbar-collapse.collapse
       .container= render 'layouts/nav/project'
     .container
       .content= yield