1. Home
  2. Marco HTML
  3. Navigation
  4. Navigation structure

Navigation structure

We created three navigations you can use. These are main navigation, fixed navigation and mobile nav bar. The main navigation with many options and appear for 1024×768 resolution or bigger. The fixed nav bar is visible after scroll when main navigation is hide. The mobile nav consist two elements nav bar with burger and logo and overlay navigation (menu items).
Each navigation is made up the same ‘modules’ (eg.: The logo is a module, the menu is a module).


Logo

 
We recommend upload two types of logo (light and dark) if you want to use light and dark navigation.

  ...
   <div class="nav-logo nav-logo-dark">
     <a href="index.html" class="show-in-viewport">
       <img src="assets/img/logo-dark.png" alt=""/>
     </a>
   </div>
   <div class="nav-logo nav-logo-light">
     <a href="index.html" class="show-in-viewport">
       <img src="assets/img/logo-light.png" alt=""/>
     </a>
   </div>
  ...

Menu item

 
Each navigation has support for double level dropdowns. To add menu remember about two classes for item, “dropdown” for list (ul) and “menu-item-has-children” for element (li) with children. If you want to keep hover effect, add class “link-hover” to element with link (a)
 

  ...
   <ul class="dropdown menu">
     ...
     <li class="menu-item menu-item-has-children">
       <a class="link-hover" href="#">Pages</a>
       <ul class="dropdown menu vertical" data-toggle>
          <li class="menu-item menu-item-has-children">
            <a href="#"><span class="title">Blog</span></a>
	    <ul class="dropdown menu vertical" data-toggle>
	       <li class="menu-item"><a href="blog.html"><span class="title">Blog grid</span></a></li>
	       <li class="menu-item"><a href="blog2.html"><span class="title">Blog rows</span></a></li>
               ...
	    </ul>
	  </li>	
       </ul>
     </li>
   </ul>
  ...

 


Main navigation type

 
There are two navigations template for main nav bar, these are: navigation with logo centered or logo on the right side or the left side. To create centered navigation, you need to divide menu items on the right side and the left side.
 

  ...
  LEFT SIDE
  <div class="main-nav-left">
    <ul class="dropdown menu desktop-menu menu-main-menu">
      <li class="menu-item menu-item-has-children">
	<a class="link-hover" href="#">Home</a>
        ...
        CENTERED LOGO
        <div class="nav-logo nav-logo-dark">
          <a href="index.html" class="show-in-viewport">
            <img src="assets/img/logo-dark.png" alt=""/>
          </a>
        </div>
        ...
   RIGHT SIDE
   <div class="main-nav-right">
     <ul class="dropdown menu desktop-menu menu-main-menu">
       <li class="menu-item menu-item-has-children">
	 <a class="link-hover" href="#">Blog</a>
  ...

Mobile navigation burger

 
If you need to change burger icon, see the documentation here (“How to change icons?”).
 

  ...
   <div id="reorder-mobile" class="hide-for-large btn-mobile-overlay" style="">
     <svg> 
         ...
      </svg>
   </div>
  ...

 

Was this article helpful to you? Yes No