Navigation Bars
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the Element Index Page →
Bar Markup
Navigation bars in Stack require a parent .barelement with container and row children. Columns inside the bar are controlled using the Bootstrap Gridclasses. Using the responsive Bootstrap Grid column classes makes it easy to control how your bar will appear on different devices (eg: tablet, mobile).
Each module inside a column is housed inside a .bar__module element.
The markup snippet below results in the bar you see to thr right in full width.
<div class="bar bg--dark boxed boxed--sm"> <div class="container"> <div class="row"> <div class="col-md-7"> <div class="bar__module"> <ul class="menu-horizontal"> <li> <a href="#">Link 1</a> </li> <li> <a href="#">Link 2</a> </li> <li> <a href="#">Link 3</a> </li> </ul> </div> </div> <div class="col-md-5"> <div class="bar__module"> <form> <input type="search" placeholder="Search here" /> </form> </div> </div> </div><!--end of row--> </div><!--end of container--></div><!--end of bar-->
Sticky Bars
Using Stack's convenient scroll class functionality, you can easily make a bar stick to the top of the page after scrolling a specified distance from the top of the page.
Add the attribute data-scroll-classto the .barelement with two arguments, first the distance to be scrolled, followed by the pos-fixed class as demonstrated below:
<div class="bar" data-scroll-class="100px:pos-fixed">...</div>
Mobile Sticky Bars
To make a navigation bar sticky on mobile, add the data attribute data-scroll-classto both.barelements inside the .nav-container
Then place the class .bar--mobile-stickyon the first .barelement as demonstrated below:
<div class="nav-container"> <div class="bar bar--mobile-sticky visible-xs" data-scroll-class="400px:pos-fixed">...</div> <nav class="bar hidden-xs" data-scroll-class="400px:pos-fixed">...</nav></div>