Navbar
El siguiente navbar es el diseño predeterminado para las plataformas, el aspecto visual es el siguiente:
Estructura básica del navbar dentro de la plataforma, es importante comentar que la clase .fix-t hace que siempre se ubique en la parte superior, si no es necesario ese acomodo, basta con remover la clase mencionada.
<!--Header nuevo-->
<header class="header-custom fix-t">
<!--Logo-->
<div class="hc-logo">
<a href="#">
<img src="https://library.service24gps.com/img/library_icon.svg"/>
</a>
</div>
<!---->
<!--MEnu-->
<div class="hc-menu">
<div>
<a href="#">Menu 1</a>
</div>
<div>
<a href="#">Menu 2</a>
</div>
<div>
<a href="#">Menu 3</a>
</div>
<div>
<a href="#">Menu 4</a>
</div>
<div>
<a href="#">Menu 5</a>
</div>
</div>
<!---->
<!--Buscador-->
<div class="hc-search">
<div class="hcs-box">
<form>
<input type="text" placeholder="Búsqueda"/>
</form>
</div>
</div>
<!---->
<!--Tiempo actualizacion-->
<div class="hc-time">
<div class="hct-box">
<button>
<i class="i-pause"></i>
</button>
<input placeholder="60 segundos"/>
</div>
</div>
<!---->
</header>
<!---->
Variantes de color
El navbar también cuenta con variantes en colores, como se muestra a continuación.
Para obtener estas variantes, es necesario agregar alguna de las siguientes clases .hc-white, .hc-blue, .hc-green, .hc-orange, .hc-purple y .hc-red al elemento header, como lo muestra el siguiente ejemplo.
//Color blanco <header class="header-custom fix-t hc-white"> ... </header> //Color azul <header class="header-custom fix-t hc-blue"> ... </header> //Color verde <header class="header-custom fix-t hc-green"> ... </header> //Color naranja <header class="header-custom fix-t hc-naranja"> ... </header> //Color morado <header class="header-custom fix-t hc-morado"> ... </header> //Color rojo <header class="header-custom fix-t hc-rojo"> ... </header>