Why is the body being hidden behind navbar when i use navbar-fixed-top
css, html, javascript, twitter-bootstrap
Solution
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
Problem
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> ```