Merge pull request #348 from Timonwa/NavBarBug

fixed nav menu bug on smaller screen.

Author: chryzcode

docs/css/global.css

@@ -48,6 +48,9 @@ body {
   /* @media (min-width: 1024px) { ... } */
   --xl: 1280px;
   /* @media (min-width: 1280px) { ... } */
+
+  /* units */
+  --navbar-height: 80px;
 }
 
 body {
@@ -66,8 +69,8 @@ h6 {
 }
 
 ul {
-   margin: 0;
-   padding: 0;
+  margin: 0;
+  padding: 0;
   list-style: none;
 }
 
@@ -133,9 +136,9 @@ textarea:focus {
 }
 
 .btn-primary:hover {
-   background: #fff;
-   border: 1px solid var(--primaryBtn);
-   color: var(--primaryBtn);
+  background: #fff;
+  border: 1px solid var(--primaryBtn);
+  color: var(--primaryBtn);
 }
 
 .btn-secondary {
@@ -147,9 +150,9 @@ textarea:focus {
 }
 
 .btn-secondary:hover {
-   background: #fff;
-   color: var(--secondaryBtn);
-   border: 1px solid var(--secondaryBtn);
+  background: #fff;
+  color: var(--secondaryBtn);
+  border: 1px solid var(--secondaryBtn);
 }
 
 .btn-rounded {
@@ -158,17 +161,17 @@ textarea:focus {
 
 /* Card */
 .box {
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
 }
 
 .box img {
-   width: 170px;
-   object-fit: cover;
-   object-position: center;
-   border-radius: 50%;
+  width: 170px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
 }
 
 .container {
@@ -201,11 +204,11 @@ textarea:focus {
   box-shadow: 3px 5px 5px var(--shadow);
 }
 
-@media(max-width: 1000px) {
-   .box {
-      display: flex;
-      justify-content: space-around;
-      border-bottom: 1px solid var(--heading);
-      /* border-radius: 20px; */
-   }
+@media (max-width: 1000px) {
+  .box {
+    display: flex;
+    justify-content: space-around;
+    border-bottom: 1px solid var(--heading);
+    /* border-radius: 20px; */
+  }
 }

docs/css/styles.css

@@ -5,7 +5,7 @@
   justify-content: space-between;
   padding: 20px;
   width: 100%;
-  height: 80px;
+  height: var(--navbar-height);
   position: fixed;
   top: 0;
   background-color: var(--footerDarkBg);
@@ -115,7 +115,12 @@ nav ul li a:focus {
 /* Media Query For Mobile View */
 @media screen and (max-width: 867px) and (max-width: 767px) {
   nav ul li {
-    padding: 46px 0;
+    /*? 100% divided by the current number of nav links which is 4 so that each nav links have the same height on whatever the height of the screen with the minimum height being 50px */
+    height: calc(100% / 4);
+    min-height: 50px;
+    display: flex;
+    align-items: center;
+    background-color: inherit;
   }
 
   nav ul li a {
@@ -141,8 +146,9 @@ nav ul li a:focus {
   .nav-list {
     position: absolute;
     right: 0;
-    height: 100vh;
-    top: 8vh;
+    /*? the height of the nav list is 100% - the height of the nav bar, so whatever you set the navbar height variable to, it will automatically be calculated and the nav-list will not shift its position under the navbar. and the top position is also equal to the nav bar height. */
+    height: calc(100vh - var(--navbar-height));
+    top: var(--navbar-height);
     background-color: var(--footerDarkBg);
     display: flex;
     flex-direction: column;
@@ -163,10 +169,6 @@ nav ul li a:focus {
 }
 
 @media screen and (max-width: 767px) and (max-width: 667px) {
-  .nav-list {
-    top: 9vh;
-  }
-
   .burger {
     display: block;
     margin-right: 13rem;
@@ -227,7 +229,7 @@ nav ul li a:focus {
 
 /* Projects */
 
-.projects .project-box{
+.projects .project-box {
   display: block;
   transition: all 0.4s ease-in-out;
   height: 100%;
@@ -259,7 +261,7 @@ nav ul li a:focus {
 }
 
 .project-content {
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   background-color: #212529;
   color: #fff;
   display: flex;
@@ -310,106 +312,106 @@ nav ul li a:focus {
 
 /* Moderators section */
 #moderators {
-   padding: 2rem 1rem 1rem;
-   margin-top: 2rem;
-   background: var(--darkBackground);
-   color: #fff;
-   position: relative;
+  padding: 2rem 1rem 1rem;
+  margin-top: 2rem;
+  background: var(--darkBackground);
+  color: #fff;
+  position: relative;
 }
 
 #moderators .text-center {
-   font-weight: 700;
-   font-size: 1.5rem;
-   margin-bottom: 3rem;
-   color: grey;
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin-bottom: 3rem;
+  color: grey;
 }
 
 #moderators .text-center a {
-   font-size: 1.2rem;
-   color: grey;
+  font-size: 1.2rem;
+  color: grey;
 }
 
 #moderators .text-center a:hover {
-   text-decoration: underline;
+  text-decoration: underline;
 }
 
 .overlay {
-   position: absolute;
-   top: 140px;
-   left: 50%;
-   width: 1px;
-   height: 700px;
-   background: var(--heading);
+  position: absolute;
+  top: 140px;
+  left: 50%;
+  width: 1px;
+  height: 700px;
+  background: var(--heading);
 }
 
 .user-profile {
-   padding: 1rem 0.5rem;
-   margin-left: 1rem; 
+  padding: 1rem 0.5rem;
+  margin-left: 1rem;
 }
 
 .user-profile h3 {
-   margin-bottom: 0.2rem;
-   font-size: 1.3rem;
-   color: #fff;
-   font-weight: 600;
+  margin-bottom: 0.2rem;
+  font-size: 1.3rem;
+  color: #fff;
+  font-weight: 600;
 }
 
 .user-profile p {
-   font-size: 0.9rem;
-   margin-bottom: 1rem;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
 }
 
 .user-profile ul {
-   color: #c0baba;
-   margin: 1.2rem 0 0.5rem;
+  color: #c0baba;
+  margin: 1.2rem 0 0.5rem;
 }
 
 .user-profile li {
-   font-size: 0.8rem;
+  font-size: 0.8rem;
 }
 
 .social-profiles a {
-   color: #fff;
-   margin: 0 0.3rem;
+  color: #fff;
+  margin: 0 0.3rem;
 }
 
 .social-profiles a:hover {
-   color: grey;
-} 
+  color: grey;
+}
 
 #moderators .box-container {
-   display: grid;
-   grid-template-columns: repeat(2, 1fr);
-   grid-gap: 3rem;
-   margin: 2rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 3rem;
+  margin: 2rem;
 }
 
 /* Responsive Moderators */
-@media(max-width: 1000px) {
-   #moderators .container {
-      width: 100%;
-   }
+@media (max-width: 1000px) {
+  #moderators .container {
+    width: 100%;
+  }
 
-   #moderators .box-container {
-      display: grid;
-      grid-template-columns: repeat(1, 1fr);
-      row-gap: 1rem;
-      column-gap: 0rem;
-      margin: 0rem;
-   }
+  #moderators .box-container {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    row-gap: 1rem;
+    column-gap: 0rem;
+    margin: 0rem;
+  }
 
-   #moderators .overlay {
-      display: none;
-   }
+  #moderators .overlay {
+    display: none;
+  }
 
-   .user-profile h3 {
-      font-size: 1.08rem;
-   }
+  .user-profile h3 {
+    font-size: 1.08rem;
+  }
 }
 
 /* Footer starts */
 .footer {
-   display: flex;
+  display: flex;
   background-color: var(--footerDarkBg);
 }
 

docs/javascript/script.js

@@ -4,8 +4,9 @@ const navToggle = () => {
   const navList = document.querySelector('.nav-list');
   const navLinks = document.querySelectorAll('.nav-list li');
 
+  // Click function on burger menu
   burger.addEventListener('click', () => {
-    // Toggle Navbar
+    // Toggle Navbar and Burger
     navList.classList.toggle('active');
     burger.classList.toggle('toggle');
 
@@ -20,8 +21,18 @@ const navToggle = () => {
       }
     });
   });
-};
 
+  // Click function on nav links
+  navLinks.forEach((link) => {
+    link.addEventListener('click', () => {
+      navList.classList.remove('active');
+      burger.classList.remove('toggle');
+      navLinks.forEach((link) => {
+        link.style.animation = '';
+      });
+    });
+  });
+};
 navToggle();
 
 // GitHub Projects
@@ -65,14 +76,17 @@ githubprojects.forEach((project) => {
   getproject(project);
 });
 
-function getproject({name, background}) {
+function getproject({ name, background }) {
   fetch(`https://api.github.com/repos/${name}`)
     .then((response) => {
       return response.json();
     })
     .then((project) => {
       // we add the project card directly to the html dom
-      githubprojectsdomelement.innerHTML += createprojectcard(project, background);
+      githubprojectsdomelement.innerHTML += createprojectcard(
+        project,
+        background
+      );
     });
 }
 
@@ -81,7 +95,7 @@ function createprojectcard(project, background) {
   project.description = project.description.replace(/:[^}]*:/, '');
 
   // TODO: add Project Card
-    let projectcard = `<div class="col-12 col-sm-6 col-lg-4">
+  let projectcard = `<div class="col-12 col-sm-6 col-lg-4">
     <a href="${project.html_url}" class="project-box">
       <div class="item project">
         <img src="./assets/projects/${background}" class="project-image" alt="${project.name}">
@@ -91,6 +105,6 @@ function createprojectcard(project, background) {
         </div>
       </div>
     </a>
-  </div>`
+  </div>`;
   return projectcard;
 }