Update menu.html

wiki/menu.html

-<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
-  <div class="container">
-
-    <!---- TEAM NAME ---->
-    <a class="navbar-brand" href="#">AshesiGhana</a>
-
-    <!---- SMALL SCREEN MENU ICON ---->
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav ml-auto left-aligned">
-
-        <!---- HOME ---->
-        <li class="nav-item">
-          <a class="nav-link" href="{{ url_for('home') }}">Home</a>
-        </li>
-
-        <!---- TEAM ---->
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="{{ url_for('pages', page='team') }}" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            Team
-          </a>
-          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='team') }}">Team</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='attributions') }}">Attributions</a></li>
-          </ul>
-        </li>
-
-        <!---- PROJECT ---->
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            Project
-          </a>
-          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='description') }}">Description</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='experiments') }}">Experiments</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='results') }}">Results</a></li>
-          </ul>
-        </li>
-
-        <!---- SAFETY ---->
-        <li class="nav-item">
-          <a class="nav-link" href="{{ url_for('pages', page='safety') }}">Safety</a>
-        </li>
-
-        <!---- HUMAN PRACTICES ---->
-        <li class="nav-item">
-          <a class="nav-link" href="{{ url_for('pages', page='human-practices') }}">Human Practices</a>
-        </li>
-
-        <!---- AWARDS ---->
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            Awards
-          </a>
-          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='education') }}">Education</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='entrepreneurship') }}">Entrepreneurship</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='hardware') }}">Hardware</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='measurement') }}">Measurement</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='model') }}">Model</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='plant') }}">Plant</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='software') }}">Software</a></li>
-            <li><a class="dropdown-item" href="{{ url_for('pages', page='sustainable') }}">Sustainable</a></li>
-          </ul>
-        </li>
-
-      </ul>
-    </div>
-  </div>
-</nav>
+<!-- NAVIGATION SECTION -->
+    <header class="header">
+        <div class="logo">Bio<span class="second">Lith</span></div>
+        <!-- <img src="./images/Home/logo_1-removebg-preview.png" alt="" width="150px"> -->
+
+        <!-- Hamburger -->
+        <div class="menu-btn">
+            <div class="menu-btn_lines"></div>
+        </div>
+        <!-- End of Hamburger -->
+
+
+        <nav>
+            <ul class="menu-items">
+                <li><a href="{{ url_for('home') }}" class="menu-item">Home</a></li>
+                <li><a href="{{ url_for('pages', page='hardware') }}" class="menu-item">Hardware</a></li>
+
+                <!-- Dropdown -->
+                <!-- add class of expand-btn for responsiveness -->
+                <li class="dropdown"><a href="#" class="menu-item expand-btn"><span>People </span><i class="fa-solid fa-caret-down"></i></a></i>
+                    <!-- add class of expandable for responsiveness to unoredered list-->
+                    <ul class="dropdown-menu expandable">
+                        <li><a href="{{ url_for('pages', page='team') }}" class="menu-item">Team</a></li>
+                        <li><a href="{{ url_for('pages', page='attributions') }}" class="menu-item">Attributions</a></li>
+                        <li><a href="#" class="menu-item">Collaborations</a></li>
+                    </ul>
+                </li>
+                <!-- End of dropdown menu -->
+
+                
+                <li><a href="{{ url_for('pages', page='human-practices') }}" class="menu-item">Human Practice</a></li>
+
+                <!-- First mega menu -->
+                <!-- add class of expand-btn for responsiveness -->
+                <li><a href="#" class="menu-item expand-btn"><span>Project</span><i class="fa-solid fa-caret-down"></i></a>
+                    
+                    <!-- add class of expandable for responsiveness-->
+                    <div class="mega-menu expandable">
+                        <div class="content">
+
+                            <div class="col">
+                                <section>
+                                    <ul class="mega-links">
+                                        <li><a href="{{ url_for('pages', page='description') }}">Description</a></li>
+                                        <li><a href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
+                                        <li><a href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
+                                        <li><a href="#">Implementation</a></li>
+                                    </ul>
+                                    
+                                </section>
+                            </div>
+
+                            <div class="col">
+                                <section>
+                                    <ul class="mega-links" id="mega-links">
+                                        <li><a href="#">Design</a></li>
+                                        <li><a href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
+                                        <li><a href="#">Modelling</a></li>
+                                        <li><a href="#">Proof of Concept</a></li>
+                                    </ul>
+                                    
+                                </section>
+                            </div>
+
+                            <div class="col">
+                                <section>
+                                    <ul class="mega-links" id="mega-links">
+                                        <li><a href="#">Safety</a></li>
+                                        <li><a href="#">Results</a></li>
+                                    </ul>
+                                    
+                                </section>
+                            </div>
+
+
+                        </div>
+                    </div>   
+                </li>
+                <!-- End of first mega menu-->
+
+                <li><a href="#" class="menu-item">Parts</a></li>
+
+                <!-- Second mega menu -->
+
+                <!-- add class of expand-btn for responsiveness -->
+                <li><a href="#" class="menu-item expand-btn"><span>Judging and Awards</span><i class="fa-solid fa-caret-down"></i></a>
+
+                    <!-- add class of expandable for responsiveness-->
+                    <div class="mega-menu expandable">
+                        <div class="content_1">
+
+                            <div class="col">
+                                <section>
+                                    <ul class="mega-links">
+                                        <li><a href="#">Medals</a></li>
+                                        <li><a href="{{ url_for('pages', page='education') }}">Education</a></li>
+                                        <li><a href="#">Communication</a></li>
+
+                                    </ul>
+                                </section>
+                            </div>
+
+                            <div class="col">
+                                <section>
+                                    <ul class="mega-links" id="mega-links">
+                                        <li><a href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
+                                        <li><a href="#">Partnership</a></li>
+                                        <li><a href="{{ url_for('pages', page='sustainable') }}">Sustainable Development Impact</a></li>
+                                    </ul>
+                                </section>
+                            </div>
+                        </div>
+                    </div> 
+                </li>
+                <!-- End of second mega menu-->
+            </ul>
+        </nav>
+    </header>
+    <!-- END OF NAVIGATION SECTION -->