它们是重叠的，因为图标和搜索栏保持了它们需要在页面上显示的默认宽度。当屏幕尺寸缩小时，它们不会得到各自的尺寸来适应。你应该像侧边栏一样折叠你的导航栏。在768px下进行媒体查询，当屏幕缩短时，你的导航栏和搜索栏的导航链接应该在侧边栏中。在侧边栏处，放置切换栏图标或按钮。折叠后，只有您的徽标将在左侧，您的愿望清单，购物车和用户图标在导航栏的右侧。理解下面的代码示例，这将给予你一个如何使你的导航栏响应的想法。下面是一个如何制作侧边栏的示例：

// This the html part
<nav class="navbar">
  <div class="navbar-logo">
    <img src="path/to/logo.png" alt="Logo">
  </div>
  <button class="navbar-toggle" id="navbarToggle">
    <span class="toggle-icon"></span>
    <span class="toggle-icon"></span>
    <span class="toggle-icon"></span>
  </button>
  <ul class="navbar-links" id="navbarLinks">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

// Here is the CSS Code
/* Basic styling for the navbar */
.navbar {
  background-color: #333;
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
}

.navbar-logo {
  margin-right: auto;
}

.navbar-logo img {
  width: 100px; /* Adjust the logo size as needed */
  height: 40px;
}

.navbar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: none; /* Hide the toggle button by default */
}

.toggle-icon {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px 0;
}

.navbar-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  margin: 0 10px;
}

.navbar-links a {
  color: #fff;
  text-decoration: none;
}

/* Media query for collapsing the navbar */
@media screen and (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }

  .navbar-logo {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .navbar-toggle {
    display: block; /* Show the toggle button when the screen size is 768px or less */
  }

  .navbar-links {
    display: none; /* Hide the nav links by default on smaller screens */
    flex-direction: column;
  }

  /* Show the nav links when the toggle button is clicked */
  .navbar-links.show {
    display: flex;
  }
}

// Here is the javascript code
const navbarToggle = document.getElementById('navbarToggle');
const navbarLinks = document.getElementById('navbarLinks');

navbarToggle.addEventListener('click', function () {
  // Toggle the 'show' class on the nav links
  navbarLinks.classList.toggle('show');
});

字符串