Responsive Top Navigation

Application of Responsee top navigation is very simple and intuitive, while result is fully operational on large-size as well as small-size screens. The main navigation bar supports 3 levels of branching. In case parent item has any child item, number of child item amount is added after name of parent item.
If the main navigation bar is displayed on small-size screens, navigation icon is displayed and its items are automatically displayed as accordion. The navigation rolls out of a left side of a small screen device.

For correct working of navigation it is necessary to use entry:

<nav>
<div class="top-nav">
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 4</a></li>
</ul> 
</div>
</nav>

In case the navigation item is active (particular sub-website with identical url address as reference in menu is displayed), “active-item” class is automatically allocated to active “li” tag.

Basic navigation bar with three levels of branching

<div class="line">
<nav>
<div class="top-nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Product</a>
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a>
<ul>
<li><a href="">Product 3-1</a></li>
<li><a href="">Product 3-2</a></li>
<li><a href="">Product 3-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Company</a>
<ul>
<li><a href="">About</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
</div>

Icon Chevron down

In case, you want to display arrow instead of figure illustrating number of submenu items, use the following entry:

<div class="line">
<nav>
<div class="top-nav">
<ul class="chevron">
<li><a href="">Home</a></li>
<li><a href="">Product</a>
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a>
<ul>
<li><a href="">Product 3-1</a></li>
<li><a href="">Product 3-2</a></li>
<li><a href="">Product 3-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Company</a>
<ul>
<li><a href="">About</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
</div>

Show the mobile navigation on the right

Thanks to the class “mobile-nav-right” you can show the mobile navigation on the right.

<div class="line">
<nav class="mobile-nav-right">
<div class="top-nav">
<ul class="chevron">
<li><a>Home</a></li>
<li><a>Product</a>
<ul>
<li><a>Product 1</a></li>
<li><a>Product 2</a></li>
<li><a>Product 3</a>
<ul>
<li><a>Product 3-1</a></li>
<li><a>Product 3-2</a></li>
<li><a>Product 3-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Company</a>
<ul>
<li><a>About</a></li>
<li><a>Location</a></li>
</ul>
</li>
<li><a>Contact</a></li>
</ul>
</div>
</nav>
</div>

Navigation bar with search form

<div class="line">
<nav>
<!--Left side-->
<div class="s-12 l-9">
<div class="top-nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Product</a></li>
<li><a href="">Company</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<!--Right side-->
<div class="s-12 l-3">
<form class="customform" style="padding: 0.625em;" action="http://google.com/">
<div class="s-7"><input type="text"  value="Search form" title="Search form"/></div>
<div class="s-5"><button type="submit">Search</button></div>
</form>
</div>
</nav>
</div>