Menu Responsive issue

Question

I am trying to make responsive menu with html, CSS and Javascript but due to some issue I am not able to make the menu responsive or hamburger icon when screen size is reduced. I want to create hamburger icon when viewed from mobile device. Can anyone help me to figure out the issue from my code. I can't find the issue.

<div class="navbar" id="myTopnav">
   
    <ul class="nav" >
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a></li>
</ul>
</div>

 <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
   <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p> <h2>Responsive Topnav Example</h2>


<style>
html {
    scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
    font-family:Poppins;
}

.navbar{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #D4D7DE;
    width: 100%;
    height: 70px;
    z-index: 1;
}
.nav{
    display: flex;
    justify-content: right;
    list-style: none;
    margin-right: 15%;
}

a{
    margin: 15px;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
}
a:hover{
    color: #000;
}

.text-part{
    width: 65%;
    height: 80%;
}        

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}
</script>

Answer 1

Nathan is right, you don't need JS for that.

First add this a.icon {display:none} to your css and change your breakpoints like so:

@media screen and (max-width: 600px) {
 .navbar a.icon {display: block;}
 .navbar a.icon {
   float: right;
   display: block;
 }
}

@media screen and (max-width: 600px) {
 .navbar {position: relative;}
 .navbar .icon {
   position: absolute;
   right: 0;
   top: 0;
 }
 .navbar .nav-item {
   float: none;
   text-align: left;
   display:none;
 }
}

Remove the .responsive because it is really not needed here instead target a.icon. The Codepen can be found here.

Answer 2

You don't really need JS for that.

    

    .humbrg {
      display: none
    }

    @media screen and (min-width: 600px) {
      .humbrg {
        display: block
      }
    }

    <div class="humbrg"> </div>