Logo (h1) with absolute position to move above navigation on resize

Question

I am creating a website layout which uses a position: absolute for the logo, to allow it to sit over another div below for stylistic reasons. I have been able to do this but doesn't really comply with responsive web design. To the right of this, I have a navigation and the logo and navigation crash when resizing.

How can I move the logo above the navigation when resizing but keep it positioned correctly when on a desktop?

Please find a snippet of my code below as well as jsfiddle link.

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

This has resolved my problem:

@media (max-width: 800px) {

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

  .top-nav {
    text-align: center;

    }

}