Navigation desktop & mobile version


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

Basic navigation


In the navbar.php, you find 2 navigation bars. Main navigation (id: navbar) is at the top of page and mini navigation (id: mini-navbar) dock to the top of screen.

Main navigation
<section id="navbar" class="main-navbar yo-anim yo-anim-fade-ttb" data-animation-delay="1500">
  <div class="nav hidden-xs">	
	...
	<ul class="main-nav pull-right">
	  <li>
		<a href="index.php" data-target="#about" data-hover="about" class="current-menu home-page">about</a>
	  </li>
	  <li>
		<a href="index.php" data-target="#screenshot" data-hover="gallery" class="header-inside home-page"> gallery</a>
	  </li>
	  <li>
		<a href="index.php" data-target="#team" data-hover="team" class="home-page">team</a>
	  </li>
	  <li>
		<a href="index.php" data-target="#contact" data-hover="contact" class="home-page">contact</a>	
   	  </li>
	  <li>
		<a href="index.php?page=elements" data-hover="" class="">elements</a>	
	  </li>
	</ul>
	...
Mini navbar
<section id="mini-navbar" class="main-navbar hidden-xs">
  <div class="nav">	
	...
	<ul class="main-nav pull-right nav-height">
	   <li>
		<a href="index.php" data-target="#about" data-hover="about" class="current-menu home-page">about</a>
	  </li>
	  <li>
		<a href="index.php" data-target="#screenshot" data-hover="gallery" class="header-inside home-page"> gallery</a>
	  </li>
	  <li>
		<a href="index.php" data-target="#team" data-hover="team" class="home-page">team</a>
	  </li>
	  <li>
		<a href="index.php" data-target="#contact" data-hover="contact" class="home-page">contact</a>	
   	  </li>
	  <li>
		<a href="index.php?page=elements" data-hover="" class="">elements</a>	
	  </li>
	</ul>
	...

To insert a logo to navbar you need to add your link image.

<div class="logo pull-left">	
  <a href="home.html">	
	<figure>	
	  <img src="img/logo1.png" alt="MniamTheme"/>	
	</figure>	
  </a>	
</div>	

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 change into the mobile navigation, you check 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" class="home-page">About</a>
	</li>
	<li class="menu-item">
	  <a title="" href="index.php" data-target="#screenshot" class="header-inside home-page">Gallery</a>
	</li>
	<li class="menu-item">
	  <a title="" href="index.php" data-target="#team" class="home-page">Team</a>
	</li>
	<li class="menu-item">
	  <a title="" href="index.php" data-target="#contact" class="home-page">Contact</a>
	</li>
	<li class="menu-item">
	  <a href="index.php?page=elements" data-hover="">Elements</a>
	</li>
  </ul>
</div>

Style variables


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