diff --git a/docs/index.md b/docs/index.md
index 6e55c10bf..1c00dfd71 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -15,6 +15,16 @@
 .promo li {
     list-style: none;
 }
+@media screen and (max-width: 1080px) and (min-width: 980px) {
+    .container-nav-buttons {
+        width: 200px;
+        float:right;
+        padding: 5px 5px 10px 5px;
+    }
+    .nav-btn{
+        width: 35%;
+    }
+}
 </style>
 
 <p class="badges" height=20px>
diff --git a/docs_theme/nav.html b/docs_theme/nav.html
index d30348756..6edae70e7 100644
--- a/docs_theme/nav.html
+++ b/docs_theme/nav.html
@@ -1,20 +1,23 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container-fluid">
-          <a class="repo-link btn btn-primary btn-small" href="https://github.com/encode/django-rest-framework/tree/master">GitHub</a>
-          <a class="repo-link btn btn-inverse btn-small {% if not page.next_page %}disabled{% endif %}" rel="next" {% if page.next_page %}href="{{ page.next_page.url|url }}"{% endif %}>
-            Next <i class="icon-arrow-right icon-white"></i>
-          </a>
-          <a class="repo-link btn btn-inverse btn-small {% if not page.previous_page %}disabled{% endif %}" rel="prev" {% if page.previous_page %}href="{{ page.previous_page.url|url }}"{% endif %}>
-            <i class="icon-arrow-left icon-white"></i> Previous
-          </a>
-          <a id="search_modal_show" class="repo-link btn btn-inverse btn-small" href="#mkdocs_search_modal" data-toggle="modal" data-target="#mkdocs_search_modal"><i class="icon-search icon-white"></i> Search</a>
+          <div class="container-nav-buttons">
+            <a class="repo-link btn btn-primary btn-small nav-btn" href="https://github.com/encode/django-rest-framework/tree/master">GitHub</a>
+            <a id="search_modal_show" class="repo-link btn btn-inverse btn-small nav-btn" href="#mkdocs_search_modal" data-toggle="modal" data-target="#mkdocs_search_modal"><i class="icon-search icon-white"></i> Search</a>
+            <a class="repo-link btn btn-inverse btn-small nav-btn {% if not page.next_page %}disabled{% endif %}" rel="next" {% if page.next_page %}href="{{ page.next_page.url|url }}"{% endif %}>
+              Next <i class="icon-arrow-right icon-white"></i>
+            </a>
+            <a class="repo-link btn btn-inverse btn-small nav-btn {% if not page.previous_page %}disabled{% endif %}" rel="prev" {% if page.previous_page %}href="{{ page.previous_page.url|url }}"{% endif %}>
+              <i class="icon-arrow-left icon-white"></i> Previous
+            </a>
+          </div>
           <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </a>
           <a class="brand" href="https://www.django-rest-framework.org/">Django REST framework</a>
+          <div class='nav-bar-menu'>
           <div class="nav-collapse collapse">
             {% if nav|length>1 %}
             <!-- Main navigation -->
@@ -40,7 +43,7 @@
             {% endif %}
           </div>
           <!--/.nav-collapse -->
-
+          </div>
         </div>
       </div>
     </div>