html - 具有绝对位置的 Logo (h1) 在调整大小时移动到导航上方

Question

我正在创建一个网站布局，该布局使用 position: absolute 作为 Logo ，出于风格原因，允许它位于下面的另一个 div 之上。我已经能够做到这一点，但并不真正符合响应式网页设计。在右侧，我有一个导航和 Logo ，调整大小时导航崩溃。

如何在调整大小时将 Logo 移动到导航上方，但在桌面上保持其正确位置？

请在下面找到我的代码片段以及 jsfiddle 链接。

https://jsfiddle.net/d9e4gtoj/

.col-12 {
  width: 100%;
}

[class*="col-"] {
    padding: 15px;
    border: 2px solid red;
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
  }

.container {
    max-width: 99%;
    margin: 22px;
    margin: 0 auto;
    text-align: center;
}

.nav {
    margin-right: -4px;
    font-family: "Lato";
}

.top-nav {
    text-align: right;
    margin-right: 5px;
    padding-top: 52px;
}

.top-nav li {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;

}

.top-nav {
    text-align: right;
    margin-right: 5px;
    padding-top: 52px;
}
.logo {
    font-size: 82px;
    font-family: 'Suez One', serif;
    color: #3F3A46;
    position: absolute;
    padding-left: 100px;
    margin-top: 40px;
}

ul {
  list-style: none;
}

  <header class="container">
          <h1 class="logo"><a href="index.html">Logo</a></h1>
      <nav class="nav top-nav">
        <ul>
          <li><a href="menu.html">Menu1</a></li>
          <li><a href="menu.html">Menu2</a></li>
          <li><a href="menu.html">Menu3</a></li>
          <li><a href="menu.html">Menu4</a></li>
        </ul>
      </nav>
    </header>
      <section class="container">
        <div class="col-12 banner">
        <h2>Tagline text. Tagline text.<br> Tagline text. Tagline text.</h2>
        </div>
      </section>

Answer 1

这解决了我的问题:

@media (max-width: 800px) {

  .logo,
  .top-nav {
    margin: 0;
    padding: 0;
  }
  .logo {
    position: relative;
  }

  .top-nav {
    text-align: center;

    }

}