Sub Navbar is useful when you need to put any additional elements into Navbar, like Tab Links or Search Bar. It also remains visible when Navbar hidden
<div class="navbar-inner"> <div class="left">...</div> <div class="center">...</div> <div class="right">...</div> <!-- Sub navbar --> <div class="subnavbar"> <!-- Sub navbar content, for example tabs buttons --> <div class="buttons-row"> <a href="#tab1" class="button active">Tab 1</a> <a href="#tab2" class="button">Tab 2</a> <a href="#tab3" class="button">Tab 3</a> </div> </div> </div>
Along with "left", "right" and "center" elements, "subnavbar" also supports "sliding" class for sliding transition when used with Dynamic Navbar
Note that page that contains Sub Navbar must have additional "with-subnavbar" class which adds additional padding top required for sub navbar
<div class="views"> <div class="view view-main"> <div class="navbar"> <div class="navbar-inner"> <div class="left"></div> <div class="center">Sub Navbar</div> <div class="right"></div> <!-- Sub navbar --> <div class="subnavbar"> <div class="buttons-row"> <a href="#tab1" class="button tab-link active">Tab 1</a> <a href="#tab2" class="button tab-link">Tab 2</a> <a href="#tab3" class="button tab-link">Tab 3</a> </div> </div> </div> </div> <div class="pages navbar-through"> <!-- Pag has additional "with-subnavbar" class --> <div data-page="home" class="page with-subnavbar"> <div class="page-content hide-bars-on-scroll"> <div class="tabs"> <div id="tab1" class="tab active"> <div class="content-block"> <p>Lorem ipsum dolor ...</p> <p>In sed augue non ...</p> </div> </div> <div id="tab2" class="tab"> <div class="content-block"> <p>Donec iaculis ...</p> <p>Curabitur egestas, mi ...</p> <p>Donec iaculis posuere ...</p> </div> </div> <div id="tab3" class="tab"> <div class="content-block"> <p>Etiam non interdum erat...</p> <p>Duis ac semper risus. Suspendisse...</p> <p>Etiam non interdum erat...</p> <p>Duis ac semper risus. Suspendisse...</p> </div> </div> </div> </div> </div> </div> </div> </div>