引导程序：扩展的导航栏切换到菜单图标，从而使点击时覆盖导航栏

Question

我正在尝试了解如何进行这项工作。我有一个带有徽标的导航栏，左侧是菜单链接。当屏幕达到768px时，菜单链接应消失，而应显示菜单图标。并且，当按下菜单图标时，菜单叠加层应该会显示这些链接以及一些按钮和链接。

我的示例如下：

<nav class="navbar navbar-expand-md fixed-top navbar-dark" id="section1">
  <div class="container">
    <a class="navbar-brand" href="#"><img class="company-logo" src="img/company-logo.svg"></a>
      <button class="navbar-toggler" type="button" data-target="#collapsingNavbarMd">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse" id="collapsingNavbarMd">
        <ul class="nav navbar-right">
          <li class="nav-item">
            <a class="nav-link" href="#works">Works</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact-us">Contact Us</a>
          </li>
          <section class="contact-buttons">
            <div class="ask-button">
              <button class="btn-outlined">Ask me</button>
            </div>
            <div class="social-icons">
              <div class="whatsapp-icon social-icon">
                <img src="img/whatsapp-icon.svg" alt="WhatsApp">
              </div>
              <div class="linkedin-icon social-icon">
                <img src="img/linkedin-icon.svg" alt="LinkedIn">
              </div>
              <div class="facebook-icon social-icon">
                <img src="img/facebook-icon.svg" alt="Facebook">
              </div>
              <div class="twitter-icon social-icon">
                <img src="img/twitter-icon.svg" alt="Twitter">
              </div>
            </div>
          </section>
        </ul>
      </div>
  </div>
</nav>

CSS：

.navbar {
  padding: 0;
  .company-logo {
    width: 140px;
    height: auto;
  }
  .company-logo:hover {
    opacity: 0.7;
  }
}

.navbar .container {
  margin-top: 30px;
}

.navbar .contact-buttons {
  display: none;
}

.navbar button {
  display: block;
}

.navbar-right .nav-item .nav-link {
  padding: 0;
  padding-left: 2.5rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
}

.navbar-dark .navbar-toggler {
  border-color: transparent;
  z-index: 2;
}

.navbar-toggler {
  padding: 0;
}

.navbar {
  button:focus {
    outline: none;
  }
}

.navbar-expand-md .container {
  padding-right: 30px;
  padding-left: 30px;
}

.navbar-expand-md .navbar-collapse {
  justify-content: flex-end;
}

叠加样式应如下：

.navbar-overlay {
  display: block;
  background-color: #585858;
  position: relative;
  width: 100%;
  text-align: center;
  display: flex;
  .container {
    flex-direction: column;
    padding: 12vh;
    ul {
      flex-direction: column;
    }
  }
  .navbar-right .nav-item .nav-link {
    padding: 0;
    padding-left: 0;
    color: #fff;
    font-size: 3rem;
    margin-bottom: 30px;
    font-weight: 500;
  }
  .company-logo {
    display: none;
  }
  .contact-buttons {
    display: block;
  }
}