Galera alguém sabe como posso fazer que um elemento com position: fixed;
seja responsivo. Ou seja, o conteúdo a esquerda permanece a esquerda e o conteúdo da direita, quando redimensionado, permanece na direita sem que fique off-canvas
?
Isso é um esboço do que estou tentando fazer:
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;
}
Consegui o efeito desejado trocando o position: fixed;
para position: absolute;
, só que cabeçalho não fica fixo no topo da tela.
CODEPEN com o código editável.