diff --git a/src/c3nav/editor/static/editor/css/editor.css b/src/c3nav/editor/static/editor/css/editor.css
index d33af6d2..89b43077 100644
--- a/src/c3nav/editor/static/editor/css/editor.css
+++ b/src/c3nav/editor/static/editor/css/editor.css
@@ -59,12 +59,12 @@ body {
     padding:8px;
     width:350px;
     right:0;
+    transition: right 300ms;
+    -webkit-transition: right 300ms;
     overflow:auto;
 }
 #mapeditcontrols > #mapeditdetail {
     right:-350px;
-    transition: right 300ms;
-    -webkit-transition: right 300ms;
     pointer-events: none;
 }
 #mapeditcontrols.detail #mapeditdetail {
@@ -127,3 +127,69 @@ legend {
 #btn_editing_cancel {
     margin-right:8px;
 }
+
+#response_switch {
+    display:none;
+}
+
+@media (max-width: 767px) {
+    #mapeditcontrols {
+        width:100vw;
+    }
+    body:not(.controls) #mapeditcontrols {
+        pointer-events: none;
+        background-image:none;
+    }
+    #mapeditcontrols > div {
+        width:100vw;
+    }
+    body:not(.controls) #mapeditcontrols > div {
+        right:-100vw !important;
+    }
+    #mapeditcontrols:not(.detail) > #mapeditdetail {
+        right:-100vw;
+        pointer-events: none;
+    }
+    #map {
+        transition: left 300ms, right ;
+        -webkit-transition: left 300ms;
+        right: auto;
+        width:100vw;
+    }
+    body.controls #map {
+        left:-100vw;
+    }
+
+    .navbar-collapse.collapse {
+      display: block;
+    }
+    .navbar-nav>li, .navbar-header {
+      float: left;
+    }
+    .navbar-nav.navbar-right:last-child {
+      margin-right: -15px;
+    }
+    .navbar-right {
+      float: right;
+    }
+
+    #show_map {
+        display:none;
+    }
+    body.controls #show_map {
+        display:block;
+    }
+    body.controls #show_details {
+        display:none;
+    }
+    .navbar-nav {
+        margin:0;
+    }
+    .navbar-nav > li > a {
+        padding-top: 15px;
+        padding-bottom: 15px;
+    }
+    #response_switch {
+        display:block;
+    }
+}
diff --git a/src/c3nav/editor/static/editor/js/editor.js b/src/c3nav/editor/static/editor/js/editor.js
index 9e851c09..b9248a42 100644
--- a/src/c3nav/editor/static/editor/js/editor.js
+++ b/src/c3nav/editor/static/editor/js/editor.js
@@ -17,6 +17,13 @@ editor = {
         L.control.scale({imperial: false}).addTo(editor.map);
         editor._highlight_layer = L.layerGroup().addTo(editor.map);
 
+        $('#show_map').click(function() {
+            $('body').removeClass('controls');
+        });
+        $('#show_details').click(function() {
+            $('body').addClass('controls');
+        });
+
         editor.get_feature_types();
         editor.get_packages();
         editor.get_sources();
@@ -287,6 +294,7 @@ editor = {
         }
         $('.leaflet-drawbar').show();
         $('.start-drawing').hide();
+        $('body').removeClass('controls');
     },
     cancel_creating: function () {
         if (editor._creating === null || editor._editing !== null) return;
@@ -309,6 +317,7 @@ editor = {
             $('.leaflet-drawbar').hide();
             var path = '/editor/features/' + editor._creating + '/add/';
             $('#mapeditcontrols').removeClass('list');
+            $('body').addClass('controls');
             $('#mapeditdetail').load(path, editor.edit_form_loaded);
         }
     },
@@ -320,6 +329,7 @@ editor = {
         var path = '/editor/features/edit/' + name + '/';
         $('#mapeditcontrols').removeClass('list');
         $('#mapeditdetail').load(path, editor.edit_form_loaded);
+        $('body').addClass('controls');
     },
     edit_form_loaded: function() {
         $('#mapeditcontrols').addClass('detail');
@@ -385,6 +395,7 @@ editor = {
                 editor._editing = null;
                 editor._creating = null;
                 editor.get_features();
+                $('body').removeClass('controls');
             }
         });
     }
diff --git a/src/c3nav/editor/templates/editor/base.html b/src/c3nav/editor/templates/editor/base.html
index 8c84d5f4..0c05774b 100644
--- a/src/c3nav/editor/templates/editor/base.html
+++ b/src/c3nav/editor/templates/editor/base.html
@@ -17,15 +17,17 @@
 
   <body>
 
-    <nav class="navbar navbar-default">
+    <nav class="navbar navbar-static-top navbar-default">
         <div class="container">
             <div class="navbar-header">
                 <a class="navbar-brand" href="{% url 'editor.index' %}">c3nav map editor</a>
             </div>
+            {% block addnav %}
+            {% endblock %}
         </div>
     </nav>
 
-    <div class="container">
+    <div class="container" id="main">
     {% block content %}
     {% endblock %}
     </div>
diff --git a/src/c3nav/editor/templates/editor/map.html b/src/c3nav/editor/templates/editor/map.html
index 2dcac640..4f4cca86 100644
--- a/src/c3nav/editor/templates/editor/map.html
+++ b/src/c3nav/editor/templates/editor/map.html
@@ -1,5 +1,15 @@
 {% extends 'editor/base.html' %}
 {% load static %}
+{% block addnav %}
+<div id="response_switch" class="navbar-collapse collapse">
+    <ul class="nav navbar-nav navbar-right">
+        <li>
+            <a href="#" id="show_map"s>&laquo; Show Map</a>
+            <a href="#" id="show_details"s>Show Details &raquo;</a>
+        </li>
+    </ul>
+</div>
+{% endblock %}
 {% block content %}
 <div id="map"></div>
 <div id="mapeditcontrols">