Full Code Here: https://github.com/akashpandya/Portfolio

@media (max-width: 700px) {
  .nav-links {
    position: absolute;
    background: #f44336;
    height: 100vh;
    width: 200px;
    top: 0;
    right: 0;
    z-index: 2;
    text-align: left;
    transition: 1s;
}

This is the script to toggle mobile navbar but when i switch to mobile view it is on by default outside of the perameters of the website and I have to turn it off and then on.

<script>
      var navlinks = document.getElementById("navLinks");
      function showMenu() {
        navlinks.style.right = "0";
      }
      function hideMenu() {
        navlinks.style.right = "-200px";
      }
    </script>

This form input was too long on mobile but the fix I found makes it look terrible

 <form>
            <input type="text"  placeholder="Name:" id="name" />
            <input type="Email"  placeholder="Email:" id="email" />
            <input type="number"  placeholder="Phone Number:" id="phone" />
            <label for="textarea">Your Message Here:</label>
            <textarea type="text"  id="msg"> </textarea>
</form>

CSS Styling for Form

.contact {
  width: 60%;
  margin: auto;
  text-align: center;
  margin-top: 150px;
  border: 1px solid #f44336;
  border-radius: 10px;
}

form {
  display: grid;
  grid-template-columns: repeat(auto-fit, (2, 1fr));
}
.grid-item {
  background-color: #fff3f3;
  text-align: center;
  margin: 10px 35px;
  border: #fff3f3;
  padding: 10px;
}
#phone,
#msg,
#btn {
  grid-column: span 2;
}
#btn {
  margin: 10px auto;
  padding: 2px 20px;
  border: 1px solid #f44336;
  background: #fff;
  border-radius: 4px;
  transition: 0.5s;
  cursor: pointer;
}
#btn:hover {
  background: #f44336;
}
label {
  text-align: start;
  margin: 0 30px;
  color: #777;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  padding-top: 20px;
}
::placeholder {
  color: #777;
  font-size: 14px;
}

CodePudding user response：

Set the .nav-links style to right: -200px;

@media (max-width: 700px) {
  .nav-links {
    position: absolute;
    background: #f44336;
    height: 100vh;
    width: 200px;
    top: 0;
    right: -200px;
    z-index: 2;
    text-align: left;
    transition: 1s;
}