Menu
I am planning around with boostrap and wondering why when I use the built in classes that my header is still getting cut off. I can use css to move it but I would figure I would not need to add my own css when using the bootstrap header classes.
This is the generated page, I am using Asp.net MVC 5.1 from VS 2013. So alot of it is in the master page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - My ASP.NET Application</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/home/index">Home</a>
</li>
<li>
<a href="#">Resume</a>
</li>
<li>
<a href="/home/portfolio">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Portfolio</h1>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text">© 2014 - My ASP.NET Application</p>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.1.0.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"c8d12fe59c90426f9175a363b9a06484"}
</script>
<script type="text/javascript" src="http://localhost:58343/af7b5f6142444a738445c2a2e5c5a6d7/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
899
Simply, use the z-index attribute. The default is 0, so if the other elements have not been changed, you can just set the z-index of the nav-bar to 1 and it will display above all other elements. ** NOTE: For z-index to work, you must use positioning. You need to rewrite your page, properly.
The gap you see, is because of the top-margin of the h1 in the header. So you can set the top margin of that h1 to 0 to remove the gap.
The header contains introductory information about the document. The nav is a menu that links to other documents.
The navbar is usually inserted as the first item within the <body> tag.
I believe it's because the Nav bar has the class navbar-fixed-top which makes the Navbar have a Fixed position in the CSS so just delete that class and it won't hide your header
Hope that fixes it for you.
52
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
