Navigation Bars

Bar Markup

Navigation bars in Stack require a parent .bar element with container and row children. Columns inside the bar are controlled using the Bootstrap Grid classes. 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-class to the .bar element 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-class to both .bar elements inside the .nav-container

Then place the class .bar--mobile-sticky on the first .bar element 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>