I have a problem with my sticky header

Question

I have a problem with my sticky header

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I'm having a problem with my sticky header (sticky header). I want that when you go down, inside the page, that it has the same horizontal shape, that it does not stretch neither on the left nor on the right side. What happens is this:

And when low:

The codes I'm 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 to make it so that when it goes down it does not shrink? Greetings.

css

asked by Nerraden 19.11.2016 в 16:51

source

2 answers

0

Give it a position: fixed; and width: 100%; to the main container of the header

answered by 20.11.2016 в 16:04

query prepared in php does not work (no error) Count Array data

score 2 · Accepted Answer

Remove the max-width from your class menu-fixed . Also, your class .contenedor has a max-width badly written so it is not applying that class, I have also commented.

On the other hand, the main problem of your question is that the menu is 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 where you want, since it does not depend on anyone.

Therefore, it no longer takes 95% of the width of the container, because it is an independent element. Therefore, you need to give the menu the same properties as .contenedor , with margin: auto and with width 95% of the screen. However, you will have to add the left: 0 and right: 0 properties for this purpose.

$(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;
    left: 0;
    right: 0;
	width:95%;
    margin: auto;
	/* 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>