move responsive switch to subheader

src/c3nav/editor/static/editor/css/editor.css

@@ -152,7 +152,19 @@ form button.invisiblesubmit {
 
 /* responsiveness */
 #responsive_switch {
-    display:none !important;
+    display:none;
+    width:100vw;
+    position:absolute;
+    top:54px;
+    left:0;
+    right:0;
+    padding:4px;
+    background-color:#f8f8f8;
+    border-width:0 0 3px;
+    border-color:#e7e7e7;
+    border-style:solid;
+    height:34px;
+    text-align:center;
 }
 @media (max-width: 767px) {
     #sidebar {
@@ -206,7 +218,10 @@ form button.invisiblesubmit {
         padding-bottom: 15px;
     }
     body.map-enabled #responsive_switch {
-        display:block !important;
+        display:block;
+    }
+    body.map-enabled #main {
+        top:88px;
     }
 }
 

src/c3nav/editor/templates/editor/base.html

@@ -26,6 +26,9 @@
         </div>
     </nav>
 
+    {% block subheader %}
+    {% endblock %}
+
     <div class="container" id="main">
     {% block content %}
     {% endblock %}

src/c3nav/editor/templates/editor/map.html

@@ -6,15 +6,15 @@
 <noscript>
     <div id="noscript">{% trans 'Editing geometries using the map requires JavaScript.' %}</div>
 </noscript>
-<div id="responsive_switch" class="navbar-collapse collapse">
-    <ul class="nav navbar-nav navbar-right">
-        <li>
-            <a href="#" id="show_map">&laquo; {% trans 'Show map' %}</a>
-            <a href="#" id="show_details">{% trans 'Show details' %} &raquo;</a>
-        </li>
-    </ul>
+{% endblock %}
+
+{% block subheader %}
+<div id="responsive_switch">
+    <a href="#" id="show_map">&laquo; {% trans 'Show map' %}</a>
+    <a href="#" id="show_details">{% trans 'Show details' %} &raquo;</a>
 </div>
 {% endblock %}
+
 {% block content %}
 <div id="map"></div>
 <div id="sidebar">