--- layout: default permalink: /navbars category: components title: Navbars description: "The navigation is a main component for our design, it is the element with which our users are guided, you have different options in colors, sizes and states. They are easy to customize, take a look and create your own navbar." ---

{{ page.title }} Component

{{ page.description }}


Use

e-nav the main container.

e-menu the right side, hidden on touch devices, visible on desktop.

e-menu-item each single item of the navbar.

e-separator a vertical line to separate navbar items.

e-distribution separates or pushes the elements of a container (e-menu) is used once or several times.


Basic structure

This is the basic structure to build a navigation (e-nav), it is important to follow this basic structure to activate and deactivate the visibility of the element (e-menu).

It includes outside the container (e-menu) the brand or logo of the website, a label and input element that detonate the visibility of the element (e-menu).

{% highlight html %}
{% endhighlight %}

With explanatory comments

{% highlight html %}
{% endhighlight %}

Distribution

The navigation bar is divided in this way we give you control over how the content of the bar is displayed. The navigation is not divided by default, if you add the elements without the distribution, the content will take the center as the default position. (See example above.)

<i class="e-distribution"></i>

Example:
with distribution. // All content on the Right.

{% highlight html %}
Logo
{% endhighlight %}

Example:
with distribution. // All content on the left.

{% highlight html %}
Logo
{% endhighlight %}

Example:
with distribution. // Both sides.

{% highlight html %}
Logo
{% endhighlight %}

Additional classes

Apply the following classes to customize the navigation.

Add fixed after e-nav to have a fixed bar.

Add narrow after e-menu to have (e-menu-item) of smaller size.


Narrow menu

The narrow menu is visible on mobile devices. To see an example, minimize your browser window.

Live view and code


Fixed Navbar

There are several predefined styles.

You can modify the menu using the references.

Add fixed after e-nav to have a fixed bar.


Live view and code

Transparent Navbar

There are several predefined styles.

You can modify the menu using the references.


Live view and code



Oh oh! we notice your small screen if you notice any damage in the navigation bars we recommend that you see it through the link button for more viewing.
See the navigation bar by clicking on the button to see it completely and without losing the format.

This page looks small, but that does not mean that the navigation bar will look the same on your page.

Use the button to see large.

Mixed Navbars

There are several predefined styles.

You can modify the menu using the references.


Live view and code



Live view and code



Live view and code



Live view and code



Live view and code



Live view and code



Live view and code



Live view and code



Live view and code



Live view and code



Live view and code



Live view and code



Live view and code