将徽标位置固定在响应式导航栏上

Question

我在设计响应式导航栏时遇到问题。 预期的行为是所有导航链接都显示在较大的屏幕上，但在较小的屏幕尺寸上会折叠为隐藏的移动菜单。

在较小的屏幕上的以下代码段中，单击徽标时，徽标将向下移动到下拉菜单的中间。

如何将其（徽标）固定在导航栏顶部并正确对齐菜单项？

document.querySelector('.topbar-brand').addEventListener('click', () => document.querySelector('.topbar-nav').classList.toggle('responsive'));
document.addEventListener('scroll', () => document.querySelector('.topbar-nav').classList.remove('responsive'));

.topbar {
  background-color: rgb(40, 58, 156);
  display: flex;
  flex-flow: row nowrap;
  top: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  z-index: 1;
}

.topbar-brand {
  display: block;
  margin-right: 1rem;
  font-size: 1.25rem;
  font-family: cursive, Arial, Helvetica, sans-serif;
}

.topbar-brand img {
  object-fit: contain;
  height: 5rem;
  width: 5rem;
}

.topbar-brand:hover,
.topbar-brand:focus {
  text-decoration: none;
}

.topbar-nav {
  display: flex;
  flex-direction: row;
  justify-self: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sticky {
  position: fixed;
}

.nav-link {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: 900;
  display: block;
  padding: 1.5rem;
  text-decoration: none;
  color: whitesmoke;
}

.nav-link:focus {
  background-color: rgba(41, 71, 240, 0.993);
  border-radius: 1rem;
}

@media screen and (max-width: 600px) {
  .topbar-nav li {
    display: none;
  }
  .topbar {
    align-content: space-around;
    justify-content: start;
  }
}

@media screen and (max-width: 600px) {
  .topbar-brand {
    margin-right: 5 rem;
    margin-top: 0;
  }
  .topbar-nav.responsive {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-top: 2rem;
  }
  .topbar-nav.responsive li {
    display: initial;
  }
  .topbar-nav.responsive li {
    border-bottom: 0.1rem solid black;
  }
}

<nav class="topbar sticky">
  <a class="topbar-brand" href="javascript:void(0);"><img src="" alt="logo"></a>
  <ul class="topbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#explore">Top Picks</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="users/login.html">Login</a>
    </li>

  </ul>
</nav>

Answer 1

只需将margin-bottom: auto;添加到.topbar-brand。由于它是一个flex元素，这将迫使其对齐到顶部。

这是一篇很好的文章，其中包含有关flexbox和自动页边距的更多信息：CSS-tricks: The peculiar magic of flexbox and auto margins

document.querySelector('.topbar-brand').addEventListener('click', () => document.querySelector('.topbar-nav').classList.toggle('responsive'));
document.addEventListener('scroll', () => document.querySelector('.topbar-nav').classList.remove('responsive'));

.topbar {
  background-color: rgb(40, 58, 156);
  display: flex;
  flex-flow: row nowrap;
  top: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  z-index: 1;
}

.topbar-brand {
  display: block;
  margin-right: 1rem;
  font-size: 1.25rem;
  font-family: cursive, Arial, Helvetica, sans-serif;
}

.topbar-brand img {
  object-fit: contain;
  height: 5rem;
  width: 5rem;
}

.topbar-brand:hover,
.topbar-brand:focus {
  text-decoration: none;
}

.topbar-nav {
  display: flex;
  flex-direction: row;
  justify-self: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sticky {
  position: fixed;
}

.nav-link {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: 900;
  display: block;
  padding: 1.5rem;
  text-decoration: none;
  color: whitesmoke;
}

.nav-link:focus {
  background-color: rgba(41, 71, 240, 0.993);
  border-radius: 1rem;
}

@media screen and (max-width: 600px) {
  .topbar-nav li {
    display: none;
  }
  .topbar {
    align-content: space-around;
    justify-content: start;
  }
}

@media screen and (max-width: 600px) {
  .topbar-brand {
    margin-right: 5 rem;
    margin-top: 0;
    margin-bottom: auto;
  }
  .topbar-nav.responsive {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-top: 2rem;
  }
  .topbar-nav.responsive li {
    display: initial;
  }
  .topbar-nav.responsive li {
    border-bottom: 0.1rem solid black;
  }
}

<nav class="topbar sticky">
  <a class="topbar-brand" href="javascript:void(0);"><img src="" alt="logo"></a>
  <ul class="topbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#explore">Top Picks</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="users/login.html">Login</a>
    </li>

  </ul>
</nav>