Barra de navegación

La barra de navegación está completamente contenida por una etiqueta de navegación HTML5. Dentro de un div row y un div contenedor de ancho 12, hay 2 partes principales de la barra de navegación. Un logo o enlace de marca, y los enlaces de navegación. Puedes alinear estos enlaces a la izquierda o derecha.

Ejemplo menú con enlaces a la izquierda:

			   <nav class="navBlanco">
					<div class="row">
						<div class="col-md-12" id="menu-horizontal">
							<div href="#" class="logo left">LOGO</div>
							<ul class="izquierda">
								<li><a href="#!">Menu 1</a></li>
								<li><a href="#!">Menu 2</a></li>
								<li><a href="#!">Menu 3</a></li>
								<li><a href="#!">Menu 4</a></li>
							</ul>
						</div>
					</div>
				</nav>

Estilos

Puedes configurar diferentes fondos modificando la clase de etiqueta nav:

<nav class="navNegro">

<nav class="navTurquesa">

Barra de navegación mobile

<nav class="navBlanco">
	<div class="row">
		<div class="col-md-12" id="menu-horizontal">
			<div href="#" class="botonMenu left "><i class="material-icons ">menu</i></div>
			<ul class="izquierda">
				<li><a href="#!">Menu 1</a></li>
				<li><a href="#!">menu 2</a></li>
				<li><a href="#!">menu 3</a></li>
				<li><a href="#!">menu 4</a></li>
				<li><a href="#!">menu 5</a></li>
			</ul>
		</div>
	</div>
</nav>

<!-- Aqui comienza la barra-->
<div class="navBar">
	<div class="margin-top10"><span class="padding-left10">LOGO</span></div>
	<ul class="listBar">
		<li><a href="#!">Menu 1</a></li>
		<li><a href="#!">menu 2</a></li>
		<li><a href="#!">menu 3</a></li>
		<li><a href="#!">menu 4</a></li>
		<li><a href="#!">menu 5</a></li>
	</ul>
</div>
<!-- Fin --->

<!--Div limpiadora -->
<div id="clearNav" ></div>
<!--Fin-->