Someone knows how I can make an element with position: fixed;
responsive. That is, the left content remains left and the content of the right, when resized, remains on the right without being off-canvas
?
This is an outline of what I'm trying to do:
HTML
<header>
<div class="content">
<img src="http://seeklogo.com/images/L/Light_Logomarca-logo-0C4DF9D65C-seeklogo.com.gif"alt="logo" />
<ul class="menu">
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
</ul>
</div>
</header>
<main>
<div class="content">
<h1>Conteúdo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
</div>
</main>
CSS
header {
position: fixed;
top: 0;
width: 100%;
min-width: 700px;
border: 1px solid black;
background-color: #ccc;
}
.logo {
display: inline-block;
}
img {
float: left;
width: 70px;
height: 70px;
max-width: 100%;
}
.menu {
float: right;
}
.menu li {
display: inline-block;
border: 1px solid black;
padding: 5px;
}
.content {
width: 700px;
margin: 0 auto;
}
main {
margin-top: 150px;
}
I got the desired effect by changing the position: fixed;
to position: absolute;
, only the header is not fixed at the top of the screen.
CODEPEN with editable code.