JavaScript在首次点击时不起作用，为什么会有任何想法？

Question

当我最初单击所选ID时，我的代码在首次单击时不起作用，但是在再次单击时按预期工作。我看不出为什么会这样。

任何帮助/建议都会很棒。

*我现在已经添加了CSS以供进一步检查。请让您再次浏览代码，因为我很头疼要解决这个问题。

<section>
  <div id="top-bar-container">
    <img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
    <i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
    <nav id="nav-bar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li>
          <a href="#">Services</a>
          <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Branding</a></li>
            <li><a href="#">Consulting</a></li>
            <li><a href="#">SEO</a></li>
          </ul>
        </li>
        <li><a href="#">Our Work</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </div>
</section>

var hamIcon = document.getElementById("hamburger-icon");

// open and close the navigation menu
hamIcon.onclick = function() {
  var navBar = document.getElementById("nav-bar");
  if (navBar.style.display === "none") {
    navBar.style.display = "block";
  } else {
    navBar.style.display = "none";
  }
};

body {
  padding: 0px;
  margin: 0px;
  font-family: "Roboto", sans-serif;
}

#top-bar-container {
  background-color: #ec671c;
  width: 100%;
  height: 75px;
  position: absolute;
  z-index: 1;
}

#nav-bar {
  width: 75%;
  float: right;
  padding-right: 50px;
}

#hamburger-icon {
  display: none;
  color: white;
  position: absolute;
  right: 20px;
  top: 20px;
}

#hamburger-icon:hover {
  color: orange;
}

/* START OF MEDIA QUERIES */
@media screen and (max-width: 767px) {

#hamburger-icon {
    display: block;
}

#nav-bar {
    padding-right: 0px;
    margin-top: 50px;
    display: none;
}
}