CSS Navigation

.navigation

	                <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>

                

.navigation .navigation-slim

	                <nav class="navigation navigation-slim">
	<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 with .form-search

	                <nav class="navigation">
	<form name="form" action="#" method="post" class="form-search">
		<input id="post_search-1" 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 .navigation-vertical

	                <nav class="navigation navigation-vertical">
	<ul>
		<li>
			<a title="Menu item 1" href="#tab1" data-fc-modules="toggle">Menu item 1</a>
			<ul id="tab1">
				<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-vars-custom: (

// First level
background-color: $color-primary,
color: contrast-color($color-primary),
border-radius: $default-border-radius,
font-family: $font-face-default,
font-weight: normal,
font-weight-active: bold,
font-size: $font-size-default,
vertical-separator: true,
text-transform: capitalize,

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

) !global !default;