标头中有两个导航和一个徽标

Question

我有一个问题，我需要做，左侧有两个导航和一个徽标。我需要的是您可以在下面的图片中看到的

我需要有效且响应迅速地进行操作，当浏览器缩小时，间隙会逐渐缩小，直到跳转到汉堡菜单。

下面您将看到我现在的需要，我需要的照片，但我不知道如何做

.site-nav {
  width: 100%;
  height: 100px;
  display: flex;
}
.site-nav .nav-logo {
  width: 200px;
  height: 100px;
  float: left;
  display: flex;
}
.site-nav .nav-logo img {
  width: 97px;
  height: 47px;
  margin: auto 0;
}
.site-nav .nav-links {
  height: 100px;
  float: right;
  flex-grow: 1;
}
.site-nav .nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100px;
  display: flex;
}
.site-nav .nav-links ul li {
  float: left;
  margin: auto;
  padding-left: 16px;
}
.site-nav .nav-links ul li:not(:last-child) {
  padding-right: 16px;
}

<nav class="site-nav">
        <div class="container">
            <div class="nav-logo">
                <img src="logo.png" alt="">
            </div>
            <div class="nav-links">
                <ul class="nav-list">
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

下面的示例如何。使用CSS grid可以很容易地指定列。使用justify-content之类的额外属性，您可以指定列的间距。

.site-nav {
  width: 100%;
  height: 100px;
}

.site-nav .container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}

.site-nav .nav-logo {
  grid-column: 1;
  width: 200px;
  height: 100px;
  float: left;
  display: flex;
}
.site-nav .nav-logo img {
  width: 97px;
  height: 47px;
  margin: auto 0;
}

.site-nav .nav-links {
 grid-column: auto;
}

.site-nav {
  list-style-type: none;
}

.site-nav li {
  display: inline-block;
}

<nav class="site-nav">
        <div class="container">
            <div class="nav-logo">
                <img src="https://cdn.pixabay.com/photo/2018/08/19/19/56/peacock-feathers-3617474_960_720.jpg" alt="">
            </div>
            <div class="nav-links">
                <ul class="nav-list">
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
            
            <div class="nav-links">
                <ul class="nav-list">
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 2

您可以使用嵌套的flexbox和媒体查询来获得所需的结果。我在徽标和汉堡包上使用了虚拟图像。

ul {
  list-style: none;
  margin: 0;
}

.site-nav {
  width: 100%;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}

.nav-links {
  display: none;
}

.nav-links .nav-list {
  display: flex;
  flex-wrap: no-wrap;
}

.mobile-menu {
  position: relative;
}

.mobile-menu .nav-list {
  display: none;
  position: absolute;
  bottom: -90px;
  left: -40px;
}

.mobile-menu:hover>.nav-list {
  display: inline-block;
}

.nav-links .nav-list>li:not(:last-child) {
  margin-right: 1rem;
}

@media screen and (min-width: 500px) {
  .mobile-menu {
    display: none;
  }
  .nav-links {
    display: inline-block;
  }
}

<nav class="site-nav">
  <div class="container">
    <div class="nav-logo">
      <img src="https://via.placeholder.com/50x50" alt="">
    </div>
    <div class="mobile-menu">
      <img src="https://via.placeholder.com/30x30" alt="">
      <ul class="nav-list">
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
      </ul>
    </div>
    <div class="nav-links">
      <ul class="nav-list">
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
      </ul>
    </div>
    <div class="nav-links">
      <ul class="nav-list">
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
      </ul>
    </div>
  </div>
</nav>