Merge pull request #4 from awindsr/main

Fixed Nav menu
ECSA-SJCET · Oct 14, 2023 · 4035fe0 · 4035fe0
2 parents 14e73a7 + 9b7ff50
commit 4035fe0
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 6 deletions.
diff --git a/assets/css/templatemo-grad-school.css b/assets/css/templatemo-grad-school.css
@@ -1558,9 +1558,10 @@ footer p a:hover {
   .main-menu { padding-right: 0!important; }
   .main-header .logo {
     line-height: 73px;
+
   }
   .main-menu li {
-    display: block;
+    display: none;
     line-height: 1;
     margin-left: 0 !important;
   }

diff --git a/execom.css b/execom.css
@@ -103,3 +103,43 @@ ul.images li img {
     object-fit: cover;
   }
 }
+
+@media screen and (max-width: 950px) {
+  .main-menu { padding-right: 0!important; }
+  .main-header .logo {
+    line-height: 73px;
+
+  }
+  .main-menu li {
+    display: none;
+    line-height: 1;
+    margin-left: 0 !important;
+  }
+
+  .main-menu li .sub-menu {
+    opacity: 1;
+    visibility: visible;
+    position: static;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+  .main-menu li .sub-menu li:last-child {
+    border-bottom: 1px solid rgba(250,250,250,0.25);
+  }
+}
+
+@media screen and (max-width: 950px) and (max-height: 400px) {
+  nav[role="navigation"].active {
+    max-height: calc(80px + 100vh);
+    overflow-y: auto;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  footer p {
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.25px;
+  }
+}
diff --git a/execom.html b/execom.html
@@ -32,15 +32,15 @@
     <div class="logo">
       <img src="assets/images/logo.png">
     </div>
-    <a href="#menu" class="menu-link"><i class="fa fa-bars"></i></a>
+    <a href="#menu" class="menu-link" onclick="toggleMenuItems()"><i class="fa fa-bars"></i></a>
     <nav id="menu" class="main-nav" role="navigation">
       <ul class="main-menu">
         <li><a href="./index.html" rel="sponsored" class="external">Home</a></li>
         <li class="has-submenu"><a href="index.html#section2" rel="sponsored" class="external">About Us</a>
           <ul class="sub-menu">
             <li><a href="./index.html#section2" rel="sponsored" class="external">Who we are?</a></li>
-            <li><a href="./index.html#section3" rel="sponsored" class="external">What we do?</a></li>
-            <li><a href="./index.html#section3" rel="sponsored" class="external">Membership</a></li>
+            <li><a href="./index.html#section2" rel="sponsored" class="external">What we do?</a></li>
+            <li><a href="./index.html#section2" rel="sponsored" class="external">Membership</a></li>
             <li><a href="https://forms.gle/jb2dPLwHFQ1uG87U6" rel="sponsored" class="external">LMS</a></li>
           </ul>
         <li><a href="#">Execom</a></li>
@@ -186,6 +186,17 @@ <h2>Student Team</h2>
     $(window).scroll(function () {
       checkSection();
     });
+
+    function toggleMenuItems() {
+      const menuItems = document.querySelectorAll('.main-menu li');
+      menuItems.forEach((menuItem) => {
+          if (menuItem.style.display === 'none' || menuItem.style.display === '') {
+              menuItem.style.display = 'block';
+          } else {
+              menuItem.style.display = 'block';
+          }
+      });
+    }
   </script>
 <script src="./assets/js/telgram_msg.js"></script>
 

diff --git a/index.html b/index.html
@@ -35,14 +35,14 @@
       <img src="assets/images/logo.png">
       <img src="assets/images/logo2.png">
     </div>
-    <a href="#menu" class="menu-link"><i class="fa fa-bars"></i></a>
+    <a href="#menu" class="menu-link" onclick="toggleMenuItems()"><i class="fa fa-bars" ></i></a>
     <nav id="menu" class="main-nav" role="navigation">
       <ul class="main-menu" id="main-menu">
         <li><a href="#section1">Home</a></li>
         <li class="has-submenu"><a href="#section2">About Us</a>
           <ul class="sub-menu">
             <li><a href="#section2">Who we are?</a></li>
-            <li><a href="#section3">What we do?</a></li>
+            <li><a href="#section2">What we do?</a></li>
             <li><a href="#section3">Membership</a></li>
             <li><a href="https://forms.gle/jb2dPLwHFQ1uG87U6" rel="sponsored" class="external">LMS</a></li>
           </ul>
@@ -595,6 +595,19 @@ <h2>Let’s Keep In Touch</h2>
     $(window).scroll(function () {
       checkSection();
     });
+    function toggleMenuItems() {
+      const menuItems = document.querySelectorAll('.main-menu li');
+      menuItems.forEach((menuItem) => {
+          if (menuItem.style.display === 'none' || menuItem.style.display === '') {
+              menuItem.style.display = 'block';
+          } else {
+              menuItem.style.display = 'block';
+          }
+      });
+    }
+
+
+
   </script>
 <script src="./assets/js/telgram_msg.js"></script>