CSS Subnavigation

.navigation-sub

	                <nav class="navigation-sub">
	<ul>
		<li class="active"><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>
                

.navigation-sub .navigation-sub-slim

	                <nav class="navigation-sub small">
	<ul>
		<li class="active"><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>
                

.navigation-sub with .form-search

	                <nav class="navigation-sub">
	<form name="form" action="#" method="post" class="form-search">
		<input id="post_search" type="text" name="search" placeholder="Search..." value="">
		<button type="submit" class="button"><i class="icon-search"></i></button>
	</form>
	<ul>
		<li class="active"><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>
                

.navigation-sub .navigation-sub-vertical

	                <nav class="navigation-sub navigation-vertical">
	<ul>
		<li class="active">
			<a title="Menu item 1" href="#tab1">Menu item 1</a>
			<ul>
				<li class="active"><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
				<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
				<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
			</ul>
		</li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>
                

.navigation and .navigation-sub

	                <nav class="navigation">
	<ul>
		<li class="active"><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>
<nav class="navigation-sub">
	<ul>
		<li class="active"><a title="Menu item 1" href="#tab1">Menu item 1</a></li>
		<li><a title="Menu item 2" href="#tab2">Menu item 2</a></li>
		<li><a title="Menu item 3" href="#tab3">Menu item 3</a></li>
	</ul>
</nav>
                

Customize the appearance

You can customize the appearance of this object by setting up in your config folder the following map. By default de values are the indicated here.

 $object-navigation-sub-vars-custom: (

// First level
background-color: $color-background,
color: $color-primary,
border-radius: $default-border-radius,
font-family: $font-face-default,
font-weight: normal,
font-weight-active: bold,
font-size: $font-size-m,

// Inner levels
background-color-dark: $color-box,
background-color-light: $color-primary-light,
inner-font-family: $font-face-default,
inner-font-weight: normal,
inner-font-size: $font-size-s,

// Object style (Default or tabbed)
style: default

) !global !default;