Menu
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 = "[email protected]">
<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>
957
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
196
In the latest version of bootstrap v5.3, you can use class="pt-5" in the body's div/tag.
22
answered Jan 24 '26 12:01
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
