Because when I put my navbar in fixed position it becomes "invisible"?

Question

Because when I put my navbar in fixed position it becomes "invisible"?

Navigation

#1 by (1 votes)

0

I'm trying different styles with CSS and now I want my navbar to stay static while one is looking at the information (Same as on this page). Even when position: fixed works as such, the other elements change their position and when I start downloading the information is super put on the navbar. I would really appreciate if someone can tell me why this is happening and how I can solve it.

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>

css navbar

asked by Lina Paredes 06.12.2018 в 02:36

source

1 answer

my project is not executed in html Do what I do in MySQL but in PDO with PHP

score 1 · Accepted Answer

Even though I do not have the point of "the other elements change their position", there are some improvements that I would recommend adding to the code, which will surely solve part of what you have, I will explain you in parts, and in the same way I'll be suggesting code.

In the first place, when passing the navbar to fixed position, it will happen that the other elements are going to "go under" so, so that there is no chance of something being lost, you need to add margin to the content container ( also would serve with padding), in the case of your code would be something like: body > .container {margin-top: 60px;} (is so and not generically to .container because it would affect all of that class, and just inside the navbar you have one that would be harmed)

On the navbar as such, in addition to the fixed position, you need to set coordinates, something like .navbar-inverse {top: 0; right; 0; left:0} ( bottom remains "auto", it is not necessary to define it), apart I see a little problem with the element of the title, I would add .navbar-brand {height: auto; padding: 0;}

But, when you scroll, you will see that there is a visual overlap, something that is not visually pleasing ... why does it happen ?, 2 reasons, one is that the navbar does not have a background to prevent that from happening ... and the other, that we have not assigned the z-index, to define how "close" the user's element is, so to speak ... solution ?, easy, add .navbar-inverse {z-index: 10; background-color: #1a1a1a;}

With this you can see much better, no ?, but I would add something more ... merely aesthetic, and that is that when you scroll and the content goes "under" the navbar, the edge looks very "sharp" ", so to speak ... then, as a personal taste, I would add .navbar-inverse {box-shadow: 0 0 3px 3px #1a1a1a}

I hope it will help you, here at the end I leave you the complete code block with all my proposed changes:

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;}