Secondary Menus

The UA Template includes two different menu styles that assist in "on-page" navigation: sidebar menus or secondary page menus.

These menus are actually a combination of the ScrollSpy and Affix plugins as well as some custom code to allow for smooth scrolling to the anchor link.

For live examples of these menus, please view the Secondary and Tertiary example pages.

Sticky Sidebar Menu

<div class="sidebar sidebar-sticky affix-top scroll-to hidden-xs hidden-sm">
	<ul class="nav nav-pills nav-stacked">
		<li class="active"><a href="#item-1">Section 1</a></li>
		<li><a href="#item-2">Section 2</a></li>
		<li><a href="#item-3">Section 3</a></li>
		<li><a href="#item-4">Section 4</a></li>
		<li><a href="#item-5">Section 5</a></li>
	</ul>
</div> <!-- .sidebar -->

<h2 id="item-1" class="page-header">Section 1 Page Header</h1>
<p>...</p>
<h2 id="item-2" class="page-header">Section 2 Page Header</h1>
<p>...</p>
...

Sticky Horizontal Menu

<div class="sticky-menu-secondary-container hidden-xs hidden-sm">
	<div class="menu-secondary menu-light menu-secondary-sticky scroll-to">
		<div class="container">
			<nav id="menu-secondary-sticky">
				<ul class="nav nav-justified">
					<li class="active">
						<a href="#item-1">Section 1</a>
					</li>
					<li>
						<a href="#item-2">Section 2</a>
					</li>
					<li>
						<a href="#item-3">Section 3</a>
					</li>
					<li>
						<a href="#item-4">Section 4</a>
					</li>
					<li>
						<a href="#item-5">Section 5</a>
					</li>
					<li>
						<a href="#item-6">Section 6</a>
					</li>
				</ul>
			</nav>
		</div> <!-- .container -->
	</div> <!-- .menu-secondary -->
</div> <!-- .sticky-menu-secondary-container -->

<h2 id="item-1">Section 1 Page Header</h1>
<p>...</p>
<h2 id="item-2">Section 2 Page Header</h1>
<p>...</p>
...