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.
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.
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).
<header class="e-nav primary">
<img src="https://bit.ly/2wzHhlX" style="width:90px;height:auto;">
<label for="e-menu" class="e-btn primary no-shadow no-desktop"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="e-menu">
<nav class="e-menu">
<i class="e-distribution"></i>
<!-- Content... -->
</nav>
</header>With explanatory comments
<header class="e-nav primary">
<!-- Brand or logo that is always visible, usually to the left -->
<img src="https://bit.ly/2wzHhlX" style="width:90px;height:auto;">
<!-- Button that detonates the visibility of the container (e-menu) -->
<label for="e-menu" class="e-btn primary no-shadow no-desktop"><i class="fas fa-bars"></i></label>
<!-- Input, important not to modify and keep above the container div(e-menu) -->
<input type="checkbox" id="e-menu">
<!-- Contains all items of navigation -->
<nav class="e-menu">
<a class="e-menu-item">Item</a><!-- X4 -->
<!-- More content... -->
</nav>
</header>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.
<header class="e-nav">
<h6>Logo</h6>
<nav class="e-menu">
<!-- Push the elements of the container to the right -->
<i class="e-distribution"></i>
<!-- All content -->
<a class="e-menu-item">Item</a>
<a class="e-menu-item">Item</a>
</nav>
</header>
Example:
with distribution. // All content on the left.
<header class="e-nav">
<h6>Logo</h6>
<nav class="e-menu">
<a class="e-menu-item">Item</a>
<a class="e-menu-item">Item</a>
<!-- Push the container elements to the left -->
<i class="e-distribution"></i>
</nav>
</header>
Example:
with distribution. // Both sides.
<header class="e-nav">
<h6>Logo</h6>
<nav class="e-menu">
<!-- More content -->
<a class="e-menu-item">Item</a>
<!-- Both sides -->
<i class="e-distribution"></i>
<!-- Both sides -->
<a class="e-btn">Button</a>
<!-- More content -->
</nav>
</header>
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.
The narrow menu is visible on mobile devices. To see an example, minimize your browser window.
Live view and codeThere are several predefined styles.
You can modify the menu using the references.
Add fixed after e-nav to have a fixed bar.
There are several predefined styles.
You can modify the menu using the references.
There are several predefined styles.
You can modify the menu using the references.
If you are using our framework in a product that generates income,
you can also help its maintenance if you wish, if you frequently help in your company
or personal developments consider making a recurring donation.
If you want to see your company's logo on this site it's time to be a serious Sponsor.
