Navigation desktop & mobile version


To create most flexible navigation bar we used different markup for desktop and mobile version. It supports nested lists and is fully responsive.

Basic navigation


We're proud to present you our navigation. We thought it'll bring some fresh into your website.

In the navbar.php, we created 4 navbars depending on the position on the home page (top, right, bottom, left) so you can choose a location your website navigation.

<div class="nav-horizontal menu-top hidden-xs nav">
  <div class="nav-bg">
	<div class="nav-wrapper pt-triggers">	
...
<div class="nav-horizontal menu-bottom hidden-xs nav">
  <div class="nav-bg">
	<div class="nav-wrapper pt-triggers">	
...
<div class="nav-vertical menu-right hidden-xs nav">
  <div class="nav-bg">
	<div class="nav-wrapper pt-triggers">	
...
<div class="nav-vertical menu-left hidden-xs nav">
  <div class="nav-bg">
	<div class="nav-wrapper pt-triggers">	
...

Our navbar has main menu (class: dl-submenu) and submenu (class: sub-nav). There you can create your own list navigation.

<ul class="dl-submenu">
  <li>
	<a href="#">blog</a>
	  <ul class="sub-nav menu">
		<li>
		  <a href="blog.html" data-target="#blog-section" data-placement="left">blog with sidebar</a>
		</li>
		<li>
		  <a href="index.php?p=blog-without-sidebar" data-target="#blog-without-sidebar-section">blog without sidebar</a>
		</li>
	  </ul>
  </li>
 ...

We propose usage only one navbar into the site and add to other arrows navigation single pages. If you want to add to arrow a singe page you need to change link in files: home1.php, home2.php, home3.php, home4.php (these are different variants of home page).

Navigation with menu and submenu navbar
...
<li class="open-submenu right nav-right" data-position="right">
  <a href="#" class="tooltips" rel="tooltip" data-toggle="tooltip" data-placement="left" title="Menu">
	<i class="icon-book-open"></i>
	<div class="arrow-nav"><i class="arrow-right"></i></div>
  </a>
</li>
...

Navigation to single page (without navbar)
...
<li class=" top nav-top" data-position="top">
  <a  href="portfolio.html" class="tooltips" data-target="#portfolio-section" rel="tooltip" data-placement="bottom" data-toggle="tooltip" title="Portfolio">
	<i class="icon-briefcase"></i>
	<div class="arrow-nav"><i class="arrow-up"></i></div>
  </a>
</li>

Mobile navigation


Mobile version of navbar authomatically redirect to resolution smaller than 767px. Navigation was changed to easy usage specially for mobile device so it contains navbar with logo and flyout container.

If you want to add your logo or change icon reorder, you find the mobile-navbar.php file and edit part of markup presented below the text.

<ul class="menu-header">
  <li class="pull-left">		
	<a href="index.php" class="logo">
	  <figure>
		<img src="img/logo.png"/>
	  </figure>
	</a>
  </li>
  <li class="reorder pull-right"><a href="#" title=""><i class="fa fa-bars"></i></a></li>
</ul>

How to change icons? Check it here.

To add own variables to list mobile navbar you edit markup in the mobile-navbar.php. To create a header below navbar with your information, check this file and find class "header-mobile". When placed some elements in the content remember to use some of our pre-defined classes and markup snippets in order to obtain the best possible look.

<div class="" id="flyout-container">
  <ul id="menu-mobile" class="nav flyout-menu">
	<li class="menu-item">
		<a title="" href="index.php" data-target="#about">About</a>
	</li>
	<li class="menu-item-has-children menu-item">
	  <a title="" href="#">Blog</a>
	  <span class="open-children"><i class="fa fa-angle-down"></i></span>
	  <ul class="subnav">
		<li><a href="index.php" data-target="#blog" title=""><span>Blog with sidebar</span></a></li>
		<li><a href="index.php" data-target="#blog" title=""><span>Blog without sidebar</span></a></li>
	  </ul>			
	</li>
	<li class="menu-item">
	  <a title="" href="index.php" data-target="#portfolio">Portfolio</a>
	</li>
	<li class="menu-item">
	  <a title="" href="index.php" data-target="#elements">Elements</a>
	</li>
	<li class="menu-item">
	  <a title="" href="index.php" data-target="#team">Team</a>
	</li>
	<li class="menu-item">
	  <a title="" href="index.php" data-target="#contact">Contact</a>
	</li>
  </ul>
</div>

Style variables


All variables are defined in less/custom.less file. Read more how to edit and compile LESS files.