Build a Product Landing Page - Problem with toggle menu - Please HELP!

1

Tell us what’s happening:
Hey everyone!
I’m working on the product landing page project at the moment. I created a responsive navbar with a toggle menu. Somehow this disabled my anchor tags except the one that says ‘contact’. Can anyone explain to me why this has happened and how I can fix that? Help would be appreciated!
Thanks,
Josy

Your code so far

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>UBlog | Instagram Academy</title>
    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Allura|Monsieur+La+Doulaise" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <header id="header">
        <nav id="nav-bar">
          <ul class="nav">
            <li class="img"><img src="https://i.imgur.com/eyX1g4e.png?1" alt="UBlog Logo" id="header-img"></li>
            <li class="navbar-icon navbar-icon-toggle"><i class="fas fa-bars fa-2x"></i></li>
            <li class="nav-link"><a href="#header">Home</a></li>
            <li class="nav-link"><a href="#course-button">Courses</a></li>
            <li class="nav-link"><a href="#header">FAQ</a></li>
            <li class="nav-link"><a href="#header">About Us</a></li>
            <li class="nav-link"><a href="#header">Blog</a></li>
            <li class="nav-link"><a href="#form">Contact</a></li>
          </ul>
        </nav>
        <div class="intro">
          <h1>LEARN HOW TO <span id="boost"> boost </span> YOUR INSTAGRAM</h1>
          <p>Do you want to be a successful Instagramer? Do you want to work from anywhere?<p>
          <button id="course-button">See Courses</button>
        </div>
        <div class="how">
          <h2>How can we help?</h2>
          <div class="container">
            <div id="Course">
              <i class="fas fa-desktop"></i>
              <h3 class="item">Online Courses</h3>
              <p class="info">PDFs and videos that will teach you everything that you need to know step by step.</p>
            </div>
            <div id="Consult">
              <i class="fas fa-microphone"></i>
              <h3 class="item">Consulting</h3>
              <p class="info">Individual one on one coachings.</p>
            </div>
            <div id="Facebook">
              <i class="fab fa-facebook-f"></i>
              <h3 class="item">Facebook Community</h3>
              <p class="info">Closed online group to interact, connect and collaborate.</p>
            </div>
          </div>
        <div class="contact">
          <h3 class="intouch">Want to get in touch with us?</h3>
          <form id="form" class="contact-form" action="https://www.freecodecamp.com/email-submit" method="POST">
            <table>
              <tr>
                <td id="tlabel">
                  <label for="Name" id="name-label">* Name:</label>
                </td>
                <td id="tanswer">
                  <input type="text" id="name" placeholder="Enter your name" required>
                </td>
              </tr>
              <tr>
                <td id="tlabel">
                  <label for="email" id="email-label">* Email:</label>
                </td>
                <td id="tanswer">
                  <input type="email" id="email" placeholder="Enter your Email" required>
                </td>
              </tr>
              <tr>
                <td id="tlabel">
                  <label for="message">* Message:</label>
                </td>
                <td>
                  <textarea name="message" id="tanswer" rows="4"  placeholder="Enter your message" required></textarea>
                </td>
              </tr>
            </table>
            <button type="submit" id="submit">Submit</button>
          </form>
        </div>
      </header>
    <footer>
      <h4 class="foot">Created by Josy. H 2019</h4>
    </footer>
    <script type="text/javascript">
      function classToggle() {
        const navs = document.querySelectorAll('.nav-link')
        navs.forEach(nav => nav.classList.toggle('navbar__ToggleShow'));
        }

        document.querySelector('.navbar-icon-toggle')
        .addEventListener('click', classToggle);
    </script>
  </body>
</html>

body {
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
}

body, html {
  width: 100%;
  font-size: 12px;
}

#nav-bar {
  margin-right: 10%;
  position: fixed;
  top: 0;
  background-color: white;
  padding-bottom: 40px;
  width: 100%;
  z-index: 1;
}

.nav {
  display: flex;
  justify-content: flex-start;
}

img {
  max-width: 150px;
}

.img {
  padding-right: 10%;
}

.nav-link {
  font-size: 2rem;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 18px;
  margin-bottom: -25px;
}

li {
  list-style: none;
  height: 15px;
}

a:hover {
  color: rgb(69,154,211);
}

a {
  text-decoration: none;
  color: #344b51;
}

.navbar-icon-toggle {
  display: none;
}

.intro {
  background-image: url(https://i.imgur.com/UvZggNk.jpg);
  background-size: cover;
  background-color: #7887a0;
  background-blend-mode: multiply;
  height: 900px;
  }

#boost {
  font-family: 'Vladimir Script', cursive;
  font-weight: lighter;
  font-size: 100px;
  color: rgb(69,154,211);
}

h1 {
  color: white;
  font-size: 8rem;
  padding-top: 140px;
  text-align: center;
}

p {
  color: white;
  font-size: 4rem;
  text-align: center;
  position: relative;
  top: 10%;
  left: 15%;
  width: 70%;
}

button {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 25px;
  color: white;
  background-color: rgb(69,154,211);
  border-radius: 5px;
  height: 55px;
  width: 220px;
  border-style: none;
  position: relative;
  top: 20%;
  z-index: 0;
}

button:hover {
  cursor: pointer;
  background-color: #16659e;
}

.how {
  text-align: center;
  color: #344b51;
  font-size: 25px;
  font-weight: lighter;
}

.container {
   display: flex;
   padding-top: 2%;
}

.container > div {
  flex:1;
}

.fa-desktop, .fa-microphone, .fa-facebook-f {
  font-size: 70px;
}

.info {
  color: #344b51;
  font-size: 80%;
}

.item {
  font-size: 90%;
  margin-bottom: -4%;
}

.contact {
  background-color: #dae3f2;
  color: #344b51;
}

.intouch {
  font-size: 140%;
  text-align: center;
  padding-top: 3%;
}

.contact-form {
  padding-bottom: 2%;
  width: auto;
}

table {
  margin: auto;
  width: auto;
}

input {
  border-radius: 4px;
  border-style: none;
  width: 250px;
  height: 20px;
}

td {
  padding-right: 20px;
  width: auto;
  vertical-align: top;
  padding-bottom: 20px;
  font-size: 80%;
}

#tlabel {
  text-align: right;
}

#tanswer {
  text-align: left;
  border-radius: 4px;
  border-style: none;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  width: 250px;
  font-weight: lighter;
}

#submit {
  width: 80px;
  height: 30px;
  font-size: 70%;
  position: relative;
  right: 40px;
}

h4 {
  color: #344b51;
  text-align: center;
  font-size: 70%;
  margin-top: 1%;
  margin-bottom: 1%;
}

/*small laptops*/

@media only screen and (min-width: 768px) and (max-width: 1100px) {
  html {
    font-size: 8px;
  }

  h1 {
  max-width: 1090px;
  }

  p {
    padding-bottom: 90px;
  }

  .nav-link {
    padding-right: 30px;
    padding-left: 10px;
  }

}

/*tablets*/

@media only screen and (min-width: 500px) and (max-width: 768px) {
  html {
    font-size: 6px;
  }

  .intro {
    height: 800px;
  }

  h1 {
  padding-right: 5px;
  padding-left: 5px;
  }

  p {
    padding-bottom: 70px;
  }

  header {
    height: 20px;
  }
  .nav {
    flex-direction: column;
  }

  .nav-link {
    display:none;
  }

  .navbar-icon-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
    right: 30px;
    top: 20px;
  }

  .navbar__ToggleShow {
    display: flex;
    font-size: 20px;
    padding-top: 50px;
    padding-left: 5px;
    }

    li {
      height: 1px;
    }

    img {
      max-width: 100px;
    }

  button {
    font-size: 22px;
    height: 50px;
    width: 200px;
    }

  h2 {
    font-size: 22px;
    padding-bottom: 20px;
    padding-top: 20px;
  }

  .fa-desktop, .fa-microphone, .fa-facebook-f {
    font-size: 60px;
  }

  .item {
    font-size: 70%;
  }

  .info {
    font-size: 60%;
  }

  .intouch {
    font-size: 22px;
    padding-top: 20px;
  }
  td {
    font-size: 65%;
  }

  #tanswer {
    font-size: 12px;
  }

  input {
    font-size: 11px;
  }

  #submit {
    width: 70px;
    height: 25px;
    font-size: 60%;
    right: 55px;
  }
}

/*phones*/

@media only screen and (max-width: 500px) {
  .nav {
    flex-direction: column;
  }

  .nav-link {
    display:none;
  }

  .navbar-icon-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
    right: 30px;
    top: 20px;
  }

  .navbar__ToggleShow {
    display: flex;
    font-size: 20px;
    padding-top: 50px;
    padding-left: 5px;
  }

  li {
    height: 1px;
  }

  html {
    font-size: 5px;
  }

  img {
    max-width: 100px;
  }

  .intro {
    height: 700px;
  }

  p {
    padding-bottom: 60px;
  }

  button {
    font-size: 17px;
    height: 40px;
    width: 180px;
    top: -15px;
    }

  .container {
    flex-direction: column;
    padding-right: 25px;
    padding-left: 25px;
    }

    h2 {
     font-size: 20px;
     padding-bottom: 20px;
     padding-top: 20px;
     }

   .fa-desktop, .fa-microphone, .fa-facebook-f {
       font-size: 50px;
     }

   .item {
       font-size: 70%;
       padding-bottom: 15px;
     }

   .info {
       font-size: 60%;
       margin-bottom: -15px;
     }

   .intouch {
       font-size: 20px;
       padding-top: 20px;
     }

  td {
      font-size: 55%;
    }

  #tanswer {
      font-size: 11px;
    }

  input {
      font-size: 10px;
    }

  #submit {
      width: 65px;
      height: 22px;
      font-size: 57%;
      right: 55px;
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0.

3

Maybe that will make things a little clearer…

4

Hmm, try changing I’d=“form” to contact-form and same with the href in your contact anchor

5

Sorry I had a typo in my question. I meant to say ‘disabled’ and not ‘enabled’.
So unfortunately this is not the solution. The only one that’s working in the toggle menu is the contact anchor.
But thanks anyways for your input!

6

Testing your code it looks like Home, Courses, and Contact all jump to the section you want. For FAQ, About Us, and Blog you have to change the #header to something else, say if you made a div with id=“faq” you would set the FAQ anchor to href="#faq". Should fix the porblem

7

For example, I set the FAQ href to “foot” and added id=“foot” to the footer and it jumps to it without any issues

8

Yes I know that some of them jump back to the header. Anyways, seems like my problem is solved. I just checked the website on my phone and you’re right, everything works fine. Before that I used the Chrome dev tool to see how the website looks on a smaller screen and then the links didn’t work. Very weird…
So thanks a lot for your help!