Why is the body being hidden behind navbar when i use navbar-fixed-top
Question
I am using the navbar class for the navigation menu. When i use the class navbar-fixed-top , some content from the body is being hidden behind the navbar. Can any body tell me why this happens?
Below is the code I've been working on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JanaSena Party</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style = "background-color: lightgrey;">
<div class = "navbar navbar-default navbar-fixed-top">
<div class = "container">
<div class = "navbar-header ">
<a href = "#" class = "navbar-brand pull-left">BRAND</a>
<button class = "navbar-toggle pull-right" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
</div>
<div class = "collapse navbar-collapse navHeaderCollapse pull-right">
<ul class = "nav navbar-nav">
<li>
<a href = "#">Link1</a>
</li>
<li>
<a href = "#"> Link2</a>
</li>
<li>
<a href="#" class = "active">Link3</a>
</li>
<li>
<a href="#">Link4</a>
</li>
<li>
<button class = "btn navbar-btn btn-danger dropdown-toggle" data-toggle = "dropdown">DropDown<span class = "caret"></span></button>
<ul class = "dropdown-menu">
<li>
<a href="#">Facebook</a>
</li>
<li>
<a href="#">Twitter</a>
</li>
<li>
<a href="#">Google+</a>
</li>
<li>
<a href="#">LinkedIn</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class = "row">
<div class="col-md-6 col-xs-10">
<form class = "form-group">
<label class = "control-label">Username</label>
<input class = "from-control" type = "text" placeholder = "Username">
<label class = "control-label">Password</label>
<input class = "form-control" type = "password" placeholder = "Password">
<label class = "control-label">Confirm Password</label>
<input class = "form-control" type = "password" placeholder = "Confirm Password">
<label class = "control-label">Email Address</label>
<input class = "form-control" type = "Email" placeholder = "harry@potter.com">
<label class = "control-label">Date of Birth</label>
<input class = "form-control" type = "Date" placeholder = "Date of birth(mm/dd/yyyy)">
<label class = "control-label"> What do you think of JSP </label>
<textarea rows = "3" class = "form-control" style = "resize: none;"></textarea>
</form>
</div>
</div>
</div>
<div class = "navbar navbar-default navbar-fixed-bottom">
<p class = "navbar-text">Hail Pawanism</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
1 answers
solution1
4 ACCPTED 2014-04-15 11:11:23
Just use padding-top: 70px; in the body tag's css implementation to push app your content down.
It happens because when you apply the navbar-fixed-top class it defines the position of the navbar as Fixed , and whenever we use Fixed positioning in CSS for an element that element is moved out of the flow of the layout, so when navbar is out of the layout your elements starts from the top of the body .
You can check this link to better understand CSS positioning
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.