diff --git a/wiki/menu.html b/wiki/menu.html
index f54e97db89c528384bee26c1b01c0142afa281e8..b0a52ffeb431ca2303e0d9fb15aeb6703dfff6dc 100644
--- a/wiki/menu.html
+++ b/wiki/menu.html
@@ -1,106 +1,154 @@
-<style>
- .navbar {
- padding-bottom: 10px;
- }
-
- .logo-container {
- position: absolute;
- top: 10px; /* Adjust this value to position the logo correctly */
- left: 10px; /* Align with the left edge of the container */
- z-index: 1030; /* Ensure logo appears above navbar */
- }
-
- .navbar-logo {
- max-width: 150px;
- border-radius:30px;
- }
-
-
-
- .nav-link {
- padding-top: 0.25rem;
- padding-bottom: 0.25rem;
- }
-</style>
-
-<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: #ffe4e1; border-radius: 20px;">
- <div class="container">
-
- <!---- LOGO ---->
- <div class="logo-container">
- <img alt="Brand" class="navbar-logo" src="https://static.igem.wiki/teams/5187/art/logo.png">
- </div>
-
-
-
- <!---- 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 Members</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>
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Updated Navigation Bar with Static Background</title>
+ <style>
+ body {
+ margin: 0;
+ font-family: Arial, sans-serif;
+ }
+ .my-nav {
+ background-color: #ffe4e1;
+ padding: 10px 0;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+ height: 78px;
+ border-radius: 20px;
+ }
+ .logo-container {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ z-index: 1030;
+ }
+ .navbar-logo {
+ max-width: 150px;
+ border-radius: 30px;
+ }
+ .my-navbar {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ height: 100%;
+ }
+ .my-navbar > li {
+ position: relative;
+ margin-right: 20px;
+ }
+ .my-navbar > li > a {
+ color: rgba(248,240,232,1);
+ text-decoration: none;
+ padding: 10px;
+ display: block;
+ }
+ .son {
+ display: none;
+ position: absolute;
+ background-color: #ffe4e1;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+ opacity: 0;
+ transition: opacity 0.3s;
+ top: 100%; /* Position the dropdown below the parent */
+ }
+ .son li a {
+ color: #2B5D6F;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ }
+ .son li a:hover {
+ background-color: #f1f1f1;
+ }
+ </style>
+</head>
+<body>
+ <nav class="my-nav" id="navbox">
+ <div class="logo-container">
+ <img alt="Brand" class="navbar-logo" src="https://static.igem.wiki/teams/5187/art/logo.png">
+ </div>
+ <ul class="my-navbar" id="my-navbar">
+ <li onmouseover="over(this)" onmouseleave="leave(this)">
+ <a href="#" style="cursor:default;">Project</a>
+ <ul class="son">
+ <li><a href="{{ url_for('pages', page='description') }}">Description</a></li>
+ <li><a href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
+ <li><a href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
+ <li><a href="{{ url_for('pages', page='experiments') }}">Experiments</a></li>
+ <li><a href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
+ <li><a href="{{ url_for('pages', page='results') }}">Results</a></li>
+ </ul>
+ </li>
+ <li onmouseover="over(this)" onmouseleave="leave(this)">
+ <a href="#" style="cursor:default;">Team</a>
+ <ul class="son">
+ <li><a href="{{ url_for('pages', page='team') }}">Team Members</a></li>
+ <li><a href="{{ url_for('pages', page='attributions') }}">Attributions</a></li>
+ </ul>
+ </li>
+ <li onmouseover="over(this)" onmouseleave="leave(this)">
+ <a href="{{ url_for('pages', page='safety') }}">Safety</a>
+ </li>
+ <li onmouseover="over(this)" onmouseleave="leave(this)">
+ <a href="{{ url_for('pages', page='human-practices') }}">Human Practices</a>
+ </li>
+ <li onmouseover="over(this)" onmouseleave="leave(this)">
+ <a href="#" style="cursor:default;">Awards</a>
+ <ul class="son">
+ <li><a href="{{ url_for('pages', page='education') }}">Education</a></li>
+ <li><a href="{{ url_for('pages', page='entrepreneurship') }}">Entrepreneurship</a></li>
+ <li><a href="{{ url_for('pages', page='hardware') }}">Hardware</a></li>
+ <li><a href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
+ <li><a href="{{ url_for('pages', page='measurement') }}">Measurement</a></li>
+ <li><a href="{{ url_for('pages', page='model') }}">Model</a></li>
+ <li><a href="{{ url_for('pages', page='plant') }}">Plant</a></li>
+ <li><a href="{{ url_for('pages', page='software') }}">Software</a></li>
+ <li><a href="{{ url_for('pages', page='sustainable') }}">Sustainable</a></li>
+ </ul>
+ </li>
+ </ul>
+ </nav>
+
+ <script>
+ var navbox = document.getElementById("navbox");
+ let navbar = document.getElementById("my-navbar");
+ let items = navbar.children;
+ function over(el){
+ for (i = 0; i < items.length; i++){
+ items[i].children[0].style.color = "#2B5D6F";
+ }
+ el.children[0].style.color = "rgba(248,240,232,1)";
+ if (el.children.length > 1){
+ let son = el.children[1];
+ if (getComputedStyle(son,null)["display"]=="none"){
+ setTimeout(function(){
+ son.style.opacity = 1;
+ }, 1);
+ son.style.display = "block";
+ }
+ }
+ }
+ function leave(el){
+ for (i = 0; i < items.length; i++){
+ items[i].children[0].style.color = "rgba(248,240,232,1)";
+ }
+ if (el.children.length > 1){
+ let son = el.children[1];
+ if (getComputedStyle(son,null)["display"]=="block"){
+ son.style.opacity = 0;
+ setTimeout(function(){
+ son.style.display = "none";
+ }, 350);
+ }
+ }
+ }
+ </script>
+</body>
+</html>