当我在小型设备上滚动时，如何隐藏网站上的导航栏(或折叠为汉堡)？[HTML/CSS]

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

/* 默认导航栏样式 */
nav {
  display: block;
}

/* 在小型设备上隐藏导航栏 */
@media screen and (max-width: 768px) {
  nav {
    display: none;
  }
}

<nav>
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="menu-btn">
    <span></span>
    <span></span>
    <span></span>
  </label>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

/* 汉堡菜单样式 */
.menu-btn {
  display: none;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin-bottom: 5px;
}

/* 在小型设备上显示汉堡菜单 */
@media screen and (max-width: 768px) {
  .menu-btn {
    display: block;
  }
  
  nav ul {
    display: none;
  }
  
  nav ul.show {
    display: block;
  }
}