css - Why is my bootstrap header covering other content? -
this question has answer here:
i have problem using bootstrap's grid system, what's happening nav bar seemingly covering other content, intended underneath it!
i'm using asp.net mvc in project, i've done set layout page this;
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>you hire ltd</title> <script src="~/scripts/jquery-2.2.4.js"></script> <script src="~/scripts/bootstrap.js"></script> <link href="~/content/bootstrap.min.css" rel="stylesheet" /> <link href="~/content/style.css" rel="stylesheet" /> </head> <body> <div class="container-fluid"> <div class="row"> <header> <nav class="navbar navbar-default navbar-fixed-top"> <div class="col-md-8"> <div class="navbar-header"> <a class="navbar-brand" href="#"> hire </a> </div> <ul class="nav nav-pills"> <li class="active">@html.actionlink("home", "index")</li> <li>@html.actionlink("about", "about")</li> <li>@html.actionlink("t&cs", "legal")</li> <li>@html.actionlink("contact us", "contact")</li> </ul> </div> <div class="col-md-offset-2"></div> <div class="col-md-2 pull-right"> <div class="container-fluid"> <div class="buttonwrapper"> <button class="btn btn-success">sign up/login</button> </div> </div> </div> </nav> </header> </div> </div> @renderbody() </body> </html> and page in question this;
<div class="container-fluid"> <div class="row"> <div class="col-md-6"> <h1>hello</h1> </div> </div> </div> i'm not entirely sure what's causing behavior, pointers appreciated.
thanks guys :)
you need add padding top. bootstrap docs:
the fixed navbar overlay other content, unless add padding top of body.
so in style.css need..
body { padding-top:70px; }
Comments
Post a Comment