Menus - UA Template Documentation | The University of Alabama

The following documentation covers the UA "main navigation" bar and the various styles (mega menu vs single dropdown), behaviors (on hover or on click), and optimizations. For information on how to implement the "top nav" bar as well as the various color options for both navbars, please see the Headers documentation.

The UA Template includes two different dropdown options for the main nav: mega menus or basic dropdown.

The mega menu displays a full page width container for you to populate many links and even images. The main menu on ua.edu is a good example of mega menus being utilized.

For those who do not require the space mega menus provide but still need a dropdown to contain all of your links, you can opt to use a single dropdown.

Note: You can mix and match the different styles across your menu items as needed.

Mega Menu

<header>
	...
	<div class="sticky-header-container">
		<div class="header-main header-primary navbar mega-menu" data-spy="affix" data-offset-top="50">
			...
			<nav class="navbar-right">
				<ul class="nav navbar-nav main-nav">
					...
					<li class="dropdown mega-menu-full">
						<a href="#" data-toggle="dropdown" class="dropdown-toggle">
							MenuItem1
						</a>

						<ul class="dropdown-menu">
							<li>
								<div class="mega-menu-content">
									...
								</div>
							</li>
						</ul>
					</li>
					...
				</ul>
			</nav>
		</div> <!-- .header-main -->
	</div> <!-- .sticky-header-container -->
	...
</header>

Basic Dropdown

<header>
	...
	<div class="sticky-header-container">
		<div class="header-main header-primary navbar mega-menu" data-spy="affix" data-offset-top="50">
			...
			<nav class="navbar-right">
				<ul class="nav navbar-nav main-nav">
					...
					<li class="dropdown">
						<a href="#" data-toggle="dropdown" class="dropdown-toggle">
							MenuItem1
						</a>

						<ul class="dropdown-menu">
							<li>...</li>
						</ul>
					</li>
					...
				</ul>
			</nav>
		</div> <!-- .header-main -->
	</div> <!-- .sticky-header-container -->
	...
</header>

The UA Template includes two different behaviors for the main navigation: on hover or on click. There are pros and cons to each method, so select the behavior that best suits your needs.

By default, the main navbar is set to work on hover.

On Hover

Note: If you choose the on hover behavior, we strongly recommend creating a landing page for the parent menu item.

<header>
	...
	<div class="sticky-header-container">
		<div class="header-main header-primary navbar mega-menu" data-spy="affix" data-offset-top="50">
			...
		</div> <!-- .header-main -->
	</div> <!-- .sticky-header-container -->
	...
</header>

On Click

To use the on click behavior for your main navbar, add the .disable-hover class to the .mega-menu element.

<header>
	...
	<div class="sticky-header-container">
		<div class="header-main header-primary navbar mega-menu disable-hover" data-spy="affix" data-offset-top="50">
			...
		</div> <!-- .header-main -->
	</div> <!-- .sticky-header-container -->
	...
</header>

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Overflow Content

Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

Reduce the number of nav items or use shorter labels.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Use the optional Menu Overflow jQuery plugin included with the UA Template.

Reduce Number of Items

If you find your menu is overflowing at certain sizes, our recommended solution is to reduce the number of menu items. Your main nav should focus on the top five or six pages you want people to visit. Try to keep the labels to one or two words at most.

Use Responsive Utilities to Hide Items

A more advanced method to deal with overflowing menu items is using Bootstrap's responsive utilities. This allows you to display all menu items at a certain size and hide less important items on a smaller screen size.

Menu Overflow plugin

The final method to dealing with overflowing menu items is utilizing our custom Menu Overflow jQuery plugin.

To use, insert <script src="/assets/js/vendors/menu-overflow.min.js"></script> at the end of your footer, after jQuery and before the UA Template scripts.min.js file.

This plugin will calculate the width of the screen compared to the width of the main nav items and, if necessary, wrap overflow items into a "More" menu.

Menu Styles