use menu to hide the rest of the navbar on mobile

diff --git a/templates/page.tmpl b/templates/page.tmpl
index 57d43415e301fec0ad96f8803a4f2e4979ae25e3..989772fc4291abb4cfd228dc1cbd5a580c513f44 100644 (file)
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -46,8 +46,7 @@
 
   <section class="hero is-primary is-small">
     <div class = "hero-head">
-<nav class="navbar">
-  <div class="container" >
+<nav class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         Recipes
@@ -58,6 +57,14 @@
       <span aria-hidden="true"></span>
     </a>
     </div>
+    <div class="navbar-menu">
+      <div class="navbar-start">
+<TMPL_UNLESS DYNAMIC>
+<TMPL_IF SEARCHFORM>
+<div class="navbar-item"><TMPL_VAR SEARCHFORM></div>
+</TMPL_IF>
+</TMPL_UNLESS>
+      </div>
 <TMPL_IF HAVE_ACTIONS>
         <div class="navbar-end">
             <TMPL_IF EDITURL>
@@ -75,11 +82,6 @@
             <TMPL_IF PREFSURL>
                 <a class="navbar-item" rel="nofollow" href="<TMPL_VAR PREFSURL>">Preferences</a>
             </TMPL_IF>
-<TMPL_UNLESS DYNAMIC>
-<TMPL_IF SEARCHFORM>
-<div class="navbar-item"><TMPL_VAR SEARCHFORM></div>
-</TMPL_IF>
-</TMPL_UNLESS>
 <TMPL_IF ACTIONS>
 <TMPL_LOOP ACTIONS>
 <span class="navbar-item"><TMPL_VAR ACTION></span>