Is there a way to position a bootstrap header above the bootstrap navigation menu? I envision an initial 250px height header with the nav-brand placed above the nav menu, both centered. As the user scrolls, the header should shrink to match the default bootstrap header size. The current code on this codepen provides an example:
http://codepen.io/mcanic/pen/OpXVWJ
Can this layout be achieved using only bootstrap classes or some custom CSS, or would absolute positioning based on window size be necessary? Any help is appreciated.
$(window).scroll(function() {
if ($(document).scrollTop() > 15) {
// $('nav').addClass('shrink');
console.log('shrink');
} else {
// $('nav').removeClass('shrink');
console.log('unshrink');
}
});
/*A unique approach to creating a customized bootstrap header and navbar design*/
body {
padding-top: 80px;
}
@media (min-width: 992px) {
nav {
height: 250px;
}
body {
padding-top: 290px;
}
}<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Fixed top navbar example for Bootstrap</title>
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">This title should go above the nav menu</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<p>
<!-- Insert additional content here -->
<!-- Include JS libraries -->
</body>
</html>