Put the slicknav menu in a div

Instead of the body.

3 files changed, 7 insertions, 1 deletions

diff --git a/web/public/css/taginfo.css b/web/public/css/taginfo.css
index 5f07a0d..1d39598 100644
--- a/web/public/css/taginfo.css
+++ b/web/public/css/taginfo.css
@@ -200,6 +200,10 @@ div#header div#header_forms form {
     padding-left: 22px;
 }
 
+div#menu-div {
+    clear: both;
+}
+
 select#locale, select#lang {
     font-size: 90%;
     background-color: #ffffff;
diff --git a/web/public/js/taginfo.js b/web/public/js/taginfo.js
index 67e1941..a99c5c1 100644
--- a/web/public/js/taginfo.js
+++ b/web/public/js/taginfo.js
@@ -885,7 +885,7 @@ jQuery(document).ready(function() {
         return jQuery('input#search').val() != '';
     });
 
-    jQuery('#menu').slicknav({ prependTo: 'body' });
+    jQuery('#menu').slicknav({ prependTo: '#menu-div' });
 
     jQuery(window).resize(function() {
         resize_box();
diff --git a/web/views/layout.erb b/web/views/layout.erb
index 6e920f8..72f2503 100644
--- a/web/views/layout.erb
+++ b/web/views/layout.erb
@@ -44,6 +44,7 @@
         </div>
     </div>
 <% unless @nosearch %>
+    <div id="menu-div">
     <ul id="menu">
         <li><a href="/keys"><%= h(t.osm.keys) %></a></li>
         <li><a href="/tags"><%= h(t.osm.tags) %></a></li>
@@ -52,6 +53,7 @@
         <li><a href="/reports"><%= h(t.taginfo.reports) %></a></li>
         <li><a href="/about"><%= h(t.taginfo.about) %></a></li>
     </ul>
+    </div>
 <% end %>
     <div id="main">
 <%= yield %>