I want to put an banner onto the fixed top navbar of the Bootstrap. My aim is using the navbar as the navigation for operations and putting a banner of the project above it. It will be cool if navbar is alway there in case of scrolling, but it is better for banner to disappear.
How can I achieve that, any examples?
The trick is in using affix, and then you don't necessarily need to put the banner in the <header>.
css:
翻译#topnavbar { margin: 0; } #topnavbar.affix { position: fixed; top: 0; width: 100%; }js:
$('#topnavbar').affix({ offset: { top: $('#banner').height() } });html:
<div class="container" id="banner"> <div class="row"> <h1> Your banner </h1> </div> </div> <nav class="navbar navbar-default navbar-static-top" role="navigation" id="topnavbar"> ... </nav>Check out the demo in bootstrap 3.1.1.
In response with Skelly's solution, I would not recommend using bootstrap's grid system to style your header. The reason being that on mobile devices this will create unnecessary line separating or unwanted spacing even with the use of "hidden-sm". You can see this as you bring the right element closer to the left element on your browser.
Instead use.. "nav-header"
<header class="masthead"> <div class="container"> <div class="nav-header"> <h1> <a href="#" title="scroll down for your viewing pleasure"> Bootstrap 3 Layout Template </a> <p class="lead">Big Top Header and Fixed Sidebar</p> </h1> <div class="pull-right hidden-sm"> <h1> <a href="#"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i> </a> </h1> </div> </div> </div> </header>