html - 我的导航没有响应并且 Logo 高于导航

Question

我正在像在那个 psd 文件中那样做一个导航:

https://imgur.com/a/OEbJDAX

但在我的 html/css 代码中，这个导航看起来像这样:

https://imgur.com/a/1OlW3eW

您可以看到 Logo 高于导航，如果我减小尺寸，该导航不会做出响应

我试图改变容器，在 css 中做了一个 flex。但这并没有帮助。

HTML:

   <header>
        <div class="container">
        <nav id="main-nav">
            <ul class="menu">
                <li><a href="#">Tour</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Pricing</a></li>
            </ul>
            <h2 class="logo">NEWPROVIDENCE</h2>
            <ul class="menu">
                <li><a href="#">Help</a></li>
                <li><a href="#">Contact</a></li>
                <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
            </ul>
        </nav>
        </div>
        </header>

CSS:

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    overflow: hidden;
}

header {
    background: url('../img/bg-header.png') no-repeat center center / cover;
    height: 100vh;
}

#main-nav {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

#main-nav ul {
    display: flex;
    list-style: none;
    align-items: center;
}

#main-nav ul li a {
    padding: 0.75rem;
    font-size: 16px;
    margin: 0 0.25rem;
    color: #26272d;
}

#main-nav ul li a:hover {
    color: #bebebf;
}


.apple {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 20px;
    color: #fff;
    background: #267df4;

}

.apple i {
    margin-right: 10px;
}

Answer 1

尝试在 1 个 ul 列表中添加您的 Logo 和所有导航链接，而不是使用 2 个列表。像这样:

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}

header {
  background: url('../img/bg-header.png') no-repeat center center / cover;
  height: 100vh;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}

#main-nav ul {
  display: flex;
  list-style: none;
  align-items: center;
}

#main-nav ul li a {
  padding: 0.75rem;
  font-size: 16px;
  margin: 0 0.25rem;
  color: #26272d;
}

#main-nav ul li a:hover {
  color: #bebebf;
}

.apple {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  color: #fff;
  background: #267df4;
}

.apple i {
  margin-right: 10px;
}

<header>
  <div class="container">
    <nav id="main-nav">
      <ul class="menu">
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li class="logo">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
        <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
      </ul>
    </nav>
  </div>
</header>

对于响应部分，尝试使用一些媒体查询。我建议您将 Logo 添加到列表顶部，并在移动设备上仅显示顶部 Logo ，在宽屏上显示中间 Logo 。例如:

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}

header {
  background: url('../img/bg-header.png') no-repeat center center / cover;
  height: 100vh;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}

#main-nav ul {
  display: flex;
  list-style: none;
  align-items: center;
}

#main-nav ul li a {
  padding: 0.75rem;
  font-size: 16px;
  margin: 0 0.25rem;
  color: #26272d;
}

#main-nav ul li a:hover {
  color: #bebebf;
}

.apple {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  color: #fff;
  background: #267df4;
}

.apple i {
  margin-right: 10px;
}

/* ADDED CSS */

.hidden {
  display: none;
}

@media (max-width: 680px) {
  .logo.mobile {
    display: block;
  }
  .logo.desktop {
    display: none;
  }
  ul.menu li {
    display: block;
  }
}

<header>
  <div class="container">
    <nav id="main-nav">
      <ul class="menu">
        <li class="logo mobile hidden">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li class="logo desktop">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
        <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
      </ul>
    </nav>
  </div>
</header>

最后，要使桌面设备上的菜单链接很好地显示在屏幕的左侧和右侧，同时保持 Logo 居中，您可以为菜单使用 css 网格。结果看这个例子:

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}

header {
  background: url('../img/bg-header.png') no-repeat center center / cover;
  height: 100vh;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}


/* Changed to grid */

#main-nav ul {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr repeat(3, auto);
  width: 100%;
  list-style: none;
  align-items: center;
  text-align: center;
}


/**/

#main-nav ul li a {
  padding: 0.75rem;
  font-size: 16px;
  margin: 0 0.25rem;
  color: #26272d;
}

#main-nav ul li a:hover {
  color: #bebebf;
}

.apple {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  color: #fff;
  background: #267df4;
}

.apple i {
  margin-right: 10px;
}


/* ADDED CSS */

.hidden {
  display: none;
}

@media (max-width: 680px) {
  .logo.mobile {
    display: block;
  }
  .logo.desktop {
    display: none;
  }
  #main-nav ul {
    grid-template-columns: 100%;
  }
  ul.menu li {
    display: block;
  }
}

<header>
  <div class="container">
    <nav id="main-nav">
      <ul class="menu">
        <li class="logo mobile hidden">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li class="logo desktop">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
        <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
      </ul>
    </nav>
  </div>
</header>