Navbars Component

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.


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).

<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>

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.

  <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>
  

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



Contribute on GitHub
Become a sponsor.

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.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron