Responsee version lightweight responsive css frameworkWhat's New in Version 7

Responsive timeline

Responsive timeline

Thanks to the timeline, you can show an events in the handy form. Each event can be presented using an icon or an image.
read more >

New free template Financer

New free template Financer

Completely new template named Financer comes with new edition of Responsee. You can look forward to excellent design and as usually completely free! We also upgraded all the other templates for Responsee 7.
read more >

Accordion

Accordion

Thanks to the accordion, you can display a huge contents even in a limited amount of space. Responsee Accordion supports an unlimited number of nested accordions. Thanks to this, you can divide a content into more and more smaller parts.
read more >

Responsive Modals

Responsive Modals

Thanks to Modals you can display a content in simple lightbox effect over particular page content. Modals may contain common text, headlines, images, buttons, iframes and a content of modal can be divided into the columns.
read more >

Ability to display the mobile navigation on the right

Ability to display the mobile navigation on the right

Thanks to the class "mobile-nav-right" you can show the mobile navigation on the right.
read more >

lorem ipsum generator professional logo generator

Top Nav

Application of Responsee 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>
It is sufficient to add class “.chevron” to the main “ul” element of navigation.

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>
Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase