hide menu and set relative path

1. add the script for hiding dropdown menu 2. use relative_url instead of absolute_url 3. add CSS code for hiding dropdown menu see #15
chinacomx · Nov 1, 2024 · 637a983 · 637a983
1 parent 8ef46ef
commit 637a983
Showing 1 changed file with 28 additions and 9 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -10,22 +10,23 @@
         </button>
         <div class="collapse navbar-collapse" id="mainNav">
             <ul class="navbar-nav">
-                <li class="nav-item"><a href="{{ '/activities/' | absolute_url }}" class="nav-link">Activities</a></li>
-                <li class="nav-item"><a href="{{ '/about/' | absolute_url }}" class="nav-link">About</a></li>
-                <li class="nav-item"><a href="{{ '/team/' | absolute_url }}" class="nav-link">Team</a></li>
-                <li class="nav-item"><a href="https://chinacomx.github.io/translations/" class="nav-link" target="_blank">Translations</a></li>                <li class="nav-item"><a href="{{ '/publications/' | absolute_url }}" class="nav-link">Publications</a></li>
-                <li class="nav-item"><a href="{{ '/resources/' | absolute_url }}" class="nav-link">Resources</a></li>
-                <li class="nav-item"><a href="{{ '/contact/' | absolute_url }}" class="nav-link">Contact</a></li>
+                <li class="nav-item"><a href="{{ '/activities/' | relative_url }}" class="nav-link">Activities</a></li>
+                <li class="nav-item"><a href="{{ '/about/' | relative_url }}" class="nav-link">About</a></li>
+                <li class="nav-item"><a href="{{ '/team/' | relative_url }}" class="nav-link">Team</a></li>
+                <li class="nav-item"><a href="https://chinacomx.github.io/translations/" class="nav-link" target="_blank">Translations</a></li>                <li class="nav-item"><a href="{{ '/publications/' | relative_url }}" class="nav-link">Publications</a></li>
+                <li class="nav-item"><a href="{{ '/resources/' | relative_url }}" class="nav-link">Resources</a></li>
+                <li class="nav-item"><a href="{{ '/contact/' | relative_url }}" class="nav-link">Contact</a></li>
             </ul>
+
             <div class="d-flex logos-right">
                 <a class="logo-link" href="https://erc.europa.eu/" title="to the Website of the European Research Center" target="_blank">
-                    <img src="{{ '/assets/images/erc-logo.png' | absolute_url }}" class="nav-logo">
+                    <img src="{{ '/assets/images/erc-logo.png' | relative_url }}" class="nav-logo">
                 </a>
                 <a class="logo-link" href="https://www.cats.uni-heidelberg.de/" title="to the Website of the CATS" target="_blank">
-                    <img src="{{ '/assets/images/cats-logo.png' | absolute_url }}" class="nav-logo">
+                    <img src="{{ '/assets/images/cats-logo.png' | relative_url }}" class="nav-logo">
                 </a>
                 <a class="logo-link" href="https://www.uni-heidelberg.de/" title="to the Website of the Heidelberg University" target="_blank">
-                    <img src="{{ '/assets/images/hd-logo.png' | absolute_url }}" class="nav-logo">
+                    <img src="{{ '/assets/images/hd-logo.png' | relative_url }}" class="nav-logo">
                 </a>
             </div>
         </div>
@@ -73,6 +74,16 @@
     .logos-right {
         margin-left: auto; /* Push the logos to the far right */
     }
+
+
+    .navbar-collapse {
+        display: none;
+    }
+
+    .navbar-collapse.show {
+        display: flex;
+    }
+
 </style>
 
 <script>
@@ -83,5 +94,13 @@
         toggler.addEventListener("click", function() {
             nav.classList.toggle("show");
         });
+
+        // Auto-hide menu when a link is clicked
+        nav.addEventListener("click", function(event) {
+            if (event.target.classList.contains("nav-link")) {
+                nav.classList.remove("show");
+            }
+        });
+
     });
 </script>