js/nav.js

@@ -1,23 +1,8 @@
-function openMenu() {
-  document.getElementById("menu").style.display = "block";
-}
-
-function closeMenu() {
-  document.getElementById("menu").style.display = "none";
-}
-
-function closeAboutPopup() {
-  document.getElementById("popup-about").style.display = "none";
-}
-
-function openAboutPopup() {
-  document.getElementById("popup-about").style.display = "block";
-}
-
-function closeTiplocPopup() {
-  document.getElementById("popup-tiploc").style.display = "none";
-}
-
-function openTiplocPopup() {
-  document.getElementById("popup-tiploc").style.display = "block";
+function menuFunction() {
+  var x = document.getElementByID("menu-hidden");
+  if x.style.display === "block") {
+    x.style.display = "none";
+  } else {
+    x.style.display = "block";
+  }
 }

page-blocks/nav-menu.php

@@ -1,12 +1,12 @@
 <?php
 echo '<script src="/js/nav.js" async></script>';
 
-echo '<div id="menu-button" class="menu-button">';
-echo '<img onclick="openMenu()" src="/assets/icons/menu.png"></img>';
+echo '<div class="nav-bar">';
+echo '<a class="menu-active" href="/">Athena</a>';
+echo '<div id="menu-hidden">';
+echo '<a href="/issue.php">Report Issue</a>';
+echo '<a href="/help.php">Help</a>';
 echo '</div>';
-echo '<div id="menu" class="menu">';
-echo '<a href="/" class="menuitem" onclick="closeMenu()"">Home</a>';
-echo '<a href="/issue.php" class="menuitem" onclick="closeMenu()"">Report Issue</a>"';
-echo '<a href="/help.php" class="menuitem" onclick="closeMenu()"">Help</a>';
-echo '<img class="menu-button" onclick="closeMenu()" class="popup-close" src="/assets/icons/close-circle.png"></img>';
+echo '<a href="javascript:void(0);" class="menu-icon" onclick="menuFunction()">';
+echo '<img src="/assets/icons/menu.png"></img>';
 echo '</div>';

styles/style.css

@@ -115,56 +115,46 @@ body {
   cursor: pointer;
 }
 
-.menu {
-  display: none;
+/* Menu Styles */
+
+.nav-bar {
+  overflow: hidden;
   background-color: #3c78d8;
-  width: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  position: relative;
 }
 
-.menu-button {
-  position: absolute;
-  background-color: #aac4ee;
-  border: none;
-  right: 30px;
-  cursor: pointer;
+.nav-bar #menu-hidden {
+  display: none;
 }
 
-.menuitem {
-  display: inline-block;
-  width: 100%;
-  background-color: #2256aa;
+.nav-bar a {
+  color: white;
+  padding: 14px 16px;
   text-decoration: none;
-  color: #f6f5f4;
-  border: none;
-  font-size: 16px;
-  font-weight: bold;
-  padding: 3px;
-  padding-left: 8px;
-  padding-right: 8px;
-  margin-left: 10px;
-  margin-right: 10px;
-  cursor: pointer;
+  font-size: 17px;
+  display: block;
+  /*background-color: #aac4ee;*/
 }
 
-@media only screen and (min-width: 600px) {
-  .menuitem {
-    min-width: 10%;
-    max-width: 40%;
-    margin: auto;
-    border-radius: 18px;
-    font-size: 20px;
-  }
+.nav-bar a.img {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
-.menuitem:hover {
-  background-color: #112b55;
+.nav-bar a:hover {
+  background-color: #ddd;
+  color: black;
 }
 
+.menu-active {
+  background: #04AA6D;
+  color: white;
+}
+
+/* Footer Styles */
+
 footer {
   background-color: #7fa7e6;
   color: white;