Navbar

dosLotosGrid no incluye ningun archivo Javascript dandote la posibilidad de utilizar el JS con el cual te sientas más cómodo.

Cómo hago para que mi navbar funcione con mi JS?

Es fácil, simplemente añade las siguiente clases por medio de JS

  • Agrega la clase 'toggle-active' al toggle btn
  • Agrega la clase 'active' al ul#mainnav

Cómo hago para que mi dropdown funcione con mi JS?

Añade la clase 'open' al item con tu clase dropdown


Navbar Default

<div class="navbar">
<a href="#" class="brand">Brand</a>
<ul role="navigation" id="navigation" class="nav">
<li><a href="#">...</a></li>
<li class="dropdown">
<a href="#">...</a>
<ul>
<li><a href="#">...</a></li>
... </ul>
</li>
... </ul>
<button data-collapse data-target="#navigation" class="toggle"><span class="icon"></span></button>
</div>

Navbar Reverse

<div class="navbar navbar-reverse">
<a href="#" class="brand">Brand</a>
<ul role="navigation" id="navigation" class="nav">
<li><a href="#">...</a></li>
<li class="dropdown">
<a href="#">...</a>
<ul>
<li><a href="#">...</a></li>
... </ul>
</li>
... </ul>
<button data-collapse data-target="#navigation" class="toggle"><span class="icon"></span></button>
</div>

Navbar Pills

<div class="navbar pills-nav">
<a href="#" class="brand">Brand</a>
<ul role="navigation" id="navigation" class="nav">
<li><a href="#">...</a></li>
<li class="dropdown">
<a href="#">...</a>
<ul>
<li><a href="#">...</a></li>
... </ul>
</li>
... </ul>
<button data-collapse data-target="#navigation" class="toggle"><span class="icon"></span></button>
</div>

Navbar opciones y ejemplos

Ejemplo Navbar Default

Ver Ejemplo

Ejemplo Navbar Horizontal

Ver Ejemplor

Ejemplo Navbar Offcanvas Left

Ver Ejemplo

Ejemplo Navbar Offcanvas Right

Ver Ejemplo

Ejemplo Navbar Fullscreen

Ver Ejemplo
dosLotos Grid v.1.1.1
Autor Carlos 'Ruso' Cucurullo
doslotos ©