move mobile menu to under title

sul-dlss · Jan 9, 2025 · df798b3 · df798b3
1 parent a52d15f
commit df798b3
Showing 1 changed file with 60 additions and 17 deletions.
diff --git a/header/index.html b/header/index.html
@@ -76,17 +76,9 @@ <h2>With navigation links</h2>
           </button>
 
           <div
-            class="collapse navbar-collapse justify-content-md-end"
-            id="user-util-collapse"
+            class="d-md-block d-none"
           >
             <ul class="navbar-nav">
-              <li class="nav-item d-md-none">
-                <a href="#item1" class="nav-link">Item 1</a>
-              </li>
-              <li class="nav-item d-md-none">
-                <a href="#item1" class="nav-link">Item 2</a>
-              </li>
-              <hr />
               <li class="nav-item">
                 <a id="bookmarks_nav" class="nav-link" href="/bookmarks">
                   Bookmarks
@@ -219,18 +211,41 @@ <h2>With navigation links</h2>
             >
               <div class="h1 my-4"><a href="/">Website at Stanford</a></div>
             </div>
-            <div class="col-md-4 d-none d-md-block">
+            <div class="col-md-4">
               <nav
-                class="navbar navbar-expand d-flex justify-content-end"
-                aria-label="browse"
+                class="navbar collapse navbar-collapse justify-content-md-end navbar-expand-md d-md-flex justify-content-md-end"
+                aria-label="browse" id="user-util-collapse"
               >
                 <ul class="navbar-nav">
                   <li class="nav-item">
                     <a class="nav-link" href="/item1">Item 1</a>
                   </li>
-                  <li class="nav-item ms-3">
+                  <li class="nav-item ms-md-3">
                     <a class="nav-link" href="/item2">Item 2</a>
                   </li>
+                  <hr />
+                  <li class="nav-item d-md-none">
+                    <a id="bookmarks_nav" class="nav-link" href="/bookmarks">
+                      Bookmarks
+                      <span
+                        class="badge badge-secondary bg-secondary"
+                        data-role="bookmark-counter"
+                        >0</span
+                      >
+                    </a>
+                  </li>
+                  <li class="nav-item d-md-none">
+                    <a class="nav-link" href="/search_history">History</a>
+                  </li>
+                  <li class="nav-item d-md-none">
+                    <a
+                      href="#feedback"
+                      class="nav-link"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#feedback"
+                      >Feedback</a
+                    >
+                  </li>
                 </ul>
               </nav>
             </div>
@@ -278,10 +293,7 @@ <h2 class="mt-5">Without navigation links</h2>
             <span class="navbar-toggler-icon"></span>
           </button>
 
-          <div
-            class="collapse navbar-collapse justify-content-md-end"
-            id="user-util-collapse"
-          >
+          <div class="d-md-block d-none">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a id="bookmarks_nav" class="nav-link" href="/bookmarks">
@@ -415,6 +427,37 @@ <h2 class="mt-5">Without navigation links</h2>
             >
               <div class="h1 my-3"><a href="/">Website at Stanford</a></div>
             </div>
+            <div>
+            <nav
+                class="navbar collapse navbar-collapse"
+                aria-label="browse" id="user-util-collapse"
+              >
+                <ul class="navbar-nav">
+                  <li class="nav-item d-md-none">
+                    <a id="bookmarks_nav" class="nav-link" href="/bookmarks">
+                      Bookmarks
+                      <span
+                        class="badge badge-secondary bg-secondary"
+                        data-role="bookmark-counter"
+                        >0</span
+                      >
+                    </a>
+                  </li>
+                  <li class="nav-item d-md-none">
+                    <a class="nav-link" href="/search_history">History</a>
+                  </li>
+                  <li class="nav-item d-md-none">
+                    <a
+                      href="#feedback"
+                      class="nav-link"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#feedback"
+                      >Feedback</a
+                    >
+                  </li>
+                </ul>
+              </nav>
+            </div>
           </div>
         </div>
       </div>