I am having a problem with my sticky header. I want that when you go down, inside the page, that it maintains the same horizontal shape, that it does not stretch on the left or right side. What happens is this:
The codes I am using are these:
$(document).ready(function(){
var altura = $('.menu').offset().top;
$(window).on('scroll', function(){
if ( $(window).scrollTop() > altura ){
$('.menu').addClass('menu-fixed')
} else {
$('.menu').removeClass('menu-fixed');
}
});
});
* {
padding:0;
margin:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.contenedor {
width: 95%;
max-widht:1000px;
margin: auto;
}
.contenedor p {
margin-bottom: 40px;
}
header nav {
background:#eb374b;
margin-bottom:10px;
-webkit-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
header nav ul {
list-style:none;
overflow: hidden;
}
header nav ul li {
float: left;
}
header nav ul li a {
display:block;
padding: 20px;
color:#fff;
text-decoration: none;
}
header nav ul li a:hover {
background: #ed475a;
}
.menu-fixed {
position: fixed;
z-index:1000;
top:0;
width:100%;
max-width: 1000px;
box-shadow:0px 4px 3px rgba(0,0,0,.5);
}
.menu-fixed ul li a {
padding:15px 20px;
}
.fuente {
font-family: verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="estilos.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="main.js"></script>
</head>
<body>
<header>
<div class="contenedor">
<div class="logo">
<img src="http://i.imgur.com/XRdQ9Ub.png" alt="">
</div>
<nav class="menu">
<ul class="fuente">
<li><a href="#">Únete!</a></li>
<li><a href="#">Inicio</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Tienda</a></li>
<li><a href="#">Votar</a></li>
<li><a href="#">Soporte</a></li>
</ul>
</nav>
</div>
</header>
<div class="contenedor">
<p>
1- Allahu Akbar juhasdguasdhiuasikdasdasbhj lmdsa bhkdas jlasknm dskjh klass dhuiasd kasnmbsi kdasn bdkha djkasnm dbasku diaj nsah dzasjk dnasd khasjkdasn kdhas djkaaskh ndjak nd hu kakasj aja jk hasi kja khasijkkj aska asjdkladjaskljddsa.
</p>
<p>
2- Allahu Akbar juhasdguasdhiuasikdasdasbhj lmdsa bhkdas jlasknm dskjh klass dhuiasd kasnmbsi kdasn bdkha djkasnm dbasku diaj nsah dzasjk dnasd khasjkdasn kdhas djkaaskh ndjak nd hu kakasj aja jk hasi kja khasijkkj aska asjdkladjaskljddsa.
</p>
<p>
3- Allahu Akbar juhasdguasdhiuasikdasdasbhj lmdsa bhkdas jlasknm dskjh klass dhuiasd kasnmbsi kdasn bdkha djkasnm dbasku diaj nsah dzasjk dnasd khasjkdasn kdhas djkaaskh ndjak nd hu kakasj aja jk hasi kja khasijkkj aska asjdkladjaskljddsa.
</p>
<p>
4- Allahu Akbar juhasdguasdhiuasikdasdasbhj lmdsa bhkdas jlasknm dskjh klass dhuiasd kasnmbsi kdasn bdkha djkasnm dbasku diaj nsah dzasjk dnasd khasjkdasn kdhas djkaaskh ndjak nd hu kakasj aja jk hasi kja khasijkkj aska asjdkladjaskljddsa.
</p>
<p>
5- Allahu Akbar juhasdguasdhiuasikdasdasbhj lmdsa bhkdas jlasknm dskjh klass dhuiasd kasnmbsi kdasn bdkha djkasnm dbasku diaj nsah dzasjk dnasd khasjkdasn kdhas djkaaskh ndjak nd hu kakasj aja jk hasi kja khasijkkj aska asjdkladjaskljddsa.
</p>
<p>
6- Allahu Akbar juhasdguasdhiuasikdasdasbhj lmdsa bhkdas jlasknm dskjh klass dhuiasd kasnmbsi kdasn bdkha djkasnm dbasku diaj nsah dzasjk dnasd khasjkdasn kdhas djkaaskh ndjak nd hu kakasj aja jk hasi kja khasijkkj aska asjdkladjaskljddsa.
</p>
<p>
7- Allahu Akbar juhasdguasdhiuasikdasdasbhj lmdsa bhkdas jlasknm dskjh klass dhuiasd kasnmbsi kdasn bdkha djkasnm dbasku diaj nsah dzasjk dnasd khasjkdasn kdhas djkaaskh ndjak nd hu kakasj aja jk hasi kja khasijkkj aska asjdkladjaskljddsa.
</p>
<p>
8- Allahu Akbar juhasdguasdhiuasikdasdasbhj lmdsa bhkdas jlasknm dskjh klass dhuiasd kasnmbsi kdasn bdkha djkasnm dbasku diaj nsah dzasjk dnasd khasjkdasn kdhas djkaaskh ndjak nd hu kakasj aja jk hasi kja khasijkkj aska asjdkladjaskljddsa.
</p>
<p>
9- Allahu Akbar juhasdguasdhiuasikdasdasbhj lmdsa bhkdas jlasknm dskjh klass dhuiasd kasnmbsi kdasn bdkha djkasnm dbasku diaj nsah dzasjk dnasd khasjkdasn kdhas djkaaskh ndjak nd hu kakasj aja jk hasi kja khasijkkj aska asjdkladjaskljddsa.
</p>
<p>
10- Allahu Akbar juhasdguasdhiuasikdasdasbhj lmdsa bhkdas jlasknm dskjh klass dhuiasd kasnmbsi kdasn bdkha djkasnm dbasku diaj nsah dzasjk dnasd khasjkdasn kdhas djkaaskh ndjak nd hu kakasj aja jk hasi kja khasijkkj aska asjdkladjaskljddsa.
</p>
</div>
</body>
</html>
Does anyone know how I do so that when I go down it doesn't shrink? Greetings.
Take the
max-width
from your classmenu-fixed
. Also, your class.contenedor
ismax-width
misspelled so that class is not being applied, I have commented it out as well.On the other hand, the main problem of your question is that the menu happens to be positioned as
fixed
and this means that it is no longer in the "workflow" of the page, that is, "it is a free element" and you can position it wherever you want, since that does not depend on anyone.Therefore, it no longer takes 95% of the width of the container, because it is a separate element. Therefore, you need to provide the menu with the same properties as the
.contenedor
, withmargin: auto
and with width at 95% of the screen. However, you will need to add theleft: 0
and propertiesright: 0
for this purpose.Give it a position: fixed; and width: 100%; to the main container of the header