I am currently working on a website layout that involves using position: absolute for the logo to overlay another div below it, purely for stylistic reasons. While I have achieved this effect, it doesn't translate well into responsive web design. When resizing the browser window, the logo and navigation collide.
Is there a way to reposition the logo above the navigation during resizing while maintaining its correct placement on desktop view?
Please see a snippet of my code below along with a link to the 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>