0

Estoy ensayando diferentes estilos con CSS y ahora quiero que mi navbar se quede estatica mientras uno va mirando la información (Igual que en esta página). Aun cuando position: fixed funciona como tal, los demás elementos cambian su posicion y cuando empiezo a bajar la información se super pone en la navbar. Agradecería mucho si alguien me puede decir por qué esta pasando esto y como lo puedo solucionar.

body{
	font-family: "Montserrat";
	background-color: #1a1a1a;
	color: #e6e6e6;
}

.navbar-inverse{
	padding: 10px 40px 30px 20px;
	background-color: #1a1a1a;
	border:none;
	position: fixed;
}
.navbar-inverse .navbar-nav >li>a{
	color: #e6e6e6;
	background-color:#33cc33;
	width: 40px;
	height: 40px;
	border-radius:50%;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-family: "Montserrat";	
}

h1{
	text-align: center;
	height: 100px;
	line-height: 100px
}


img{
	width: 300px;
	height: 300px;
	border-radius: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin: 50px;
}


.col-lg-6{
	height: 400px;
	text-align: center;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
<head>
	<title>Short Stories</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="shortStories.css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<!-- BARRA MENÚ -->
<nav class="navbar navbar-inverse">
	<div class="container">
		<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburguer" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				</button>
			<a href="HappyChristmas.html" class="navbar-brand">The Octopus <br> and <br> The Sea Horse</a>
		</div>
		<div class="collapse navbar-collapse" id="hamburguer">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="shortStories.html">Spnsh Dc</a></li>
			</ul>
		</div>	
	</div>	
</nav>
<div class="container">
	<div class="row">
		<div class="col-lg-12">
			<h1>Sometime ago there were 2 ...</h1>	
		</div>
	</div>
	<div class="row">	
		<div class="col-lg-6">
			<h3>HI´m tryin to make this work,</h3> 
		</div >
		<div class="col-lg-6">
			<img src="http://drive.google.com/uc?export=view&id=10hbQmDtsFkjWxTjJH0q3Sa7VascERgSY">
		</div>
		<div class="col-lg-6">
			<img src="http://drive.google.com/uc?export=view&id=10hbQmDtsFkjWxTjJH0q3Sa7VascERgSY">
		</div>
		<div class="col-lg-6">
			<h3>And it´s not working,</h3> 
		</div >
	</div>
</div>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script type="text/javascript" src="LandingPageChristmas.js"></script>
</body>

3
  • te refieres a que las imagenes aparecen "delante" del navbar?
    – Jose
    el 6 dic. 2018 a las 1:59
  • Mi primera recomendación sería que cuando vayas a mostrar lo que estas haciendo, en lugar de pegar el codigo acá, uses un servicio como JSBin, JSFiddle o CodePen, asi tambien le facilitas la tarea de revisar y depurar tu codigo :)
    – Jesus Lugo
    el 6 dic. 2018 a las 4:59
  • Muchas gracias! Soy muy nueva en esto y la verdad me sirven mucho esas recomendaciones! Lo tendré en cuenta la próxima vez! el 6 dic. 2018 a las 18:59

1 respuesta 1

2

Aun cuando no tengo claro el punto de "los demás elementos cambian su posicion", hay algunas mejoras que te recomendaría agregar al codigo, que seguramente solucionarán parte de lo que tienes, te voy explicando por partes, y del mismo modo te iré sugiriendo código.

En primer lugar, al pasar el navbar a posición fija, sucederá que los demás elementos van a "pasar por debajo" asi que, para que no exista la oportunidad de que algo se pierda, necesitas agregar margen al contenedor del contenido (tambien serviría con padding), en el caso de tu codigo sería algo como: body > .container {margin-top: 60px;} (está asi y no genericamente a .container porque afectaría a todos los de esa clase, y justamente dentro del navbar tienes uno que se vería perjudicado)

Sobre el navbar como tal, ademas de la posicion fija, necesitas establecer coordenadas, algo como .navbar-inverse {top: 0; right; 0; left:0} (bottom queda "auto", no es necesario definirla), aparte veo un problemita con el elemento del titulo, yo agregaría .navbar-brand {height: auto; padding: 0;}

Pero, al momento de hacer scroll, igual verás que hay una superposición visual, algo que no es visualmente agradable... ¿porqué pasa?, 2 razones, una es que el navbar no tiene un fondo para evitar que eso pase... y la otra, que no hemos asignado el z-index, para definir que tan "cerca" está el elemento del usuario, por decirlo de una manera... ¿solución?, facil, agreguemos .navbar-inverse {z-index: 10; background-color: #1a1a1a;}

Con esto ya se ve mucho mejor, no?, pero yo le agregaría algo mas... meramente estético, y es que cuando haces scroll y el contenido pasa "por debajo" del navbar, el borde se ve muy "cortante", por asi decirlo... entonces, como un gusto personal, yo le agregaría .navbar-inverse {box-shadow: 0 0 3px 3px #1a1a1a}

Espero te sirva de ayuda, aqui al final te dejo el bloque completo de codigo con todos mis cambios propuestos:

body > .container {margin-top: 60px}
.navbar-inverse {
    top: 0; 
    right; 0; 
    left:0;
    z-index: 10; 
    background-color: #1a1a1a;
    box-shadow: 0 0 3px 3px #1a1a1a;
}
.navbar-brand {height: auto; padding: 0;}
2
  • 1
    Oh mi Dios!!!!! Muchas, muchas gracias! Funciona y se ve 100% mejor, de verdad gracias por tomarte el tiempo para explicarme y responderme de una manera tan clara y con tan buena energía :D el 6 dic. 2018 a las 19:37
  • A la orden, mi idea no era nada mas darte una solución de codigo, sino explicarte el porqué de cada cosa... si ha sido de tu agrado, te agradezco si me adjudicas la respuesta :)
    – Jesus Lugo
    el 6 dic. 2018 a las 23:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.