ロゴ（h1）は、リサイズの上で移動するために絶対位置に移動します

Question

初めてここには、私はHTMLとCSSを1週間使用していますので、私に同行してください。私は、ロゴにposition: absoluteを使用するウェブサイトのレイアウトを作成しています。これは、スタイル上の理由から、別のdivの上に座ることができます。私はこれを行うことができましたが、敏感なウェブデザインには本当に順応しません。この右側には、サイズ変更時にナビゲーションとロゴとナビゲーションクラッシュがあります。

サイズ変更時にナビゲーションの上にロゴを移動できますが、デスクトップ上に正しく配置されたままにするにはどうすればよいですか？私のコードのスニペットと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; 

    } 

} 

これは私の問題を解決しました。誰かを助けるための投稿。