Nav Menu Mobile:

Lets begin. Open header.html file and follow the steps. Note! The header nav mobile is loaded once from a single file (header.html) into several HTML pages ;) This presentation not includes the i18next language translation.

<nav class="nav-menu">
  <button id="nav-toggle" class="menu-toggle">
  <span class="icon"></span>
  <span class="icon"></span>
  <span class="icon"></span>
  </button>
  <ul class="main-menu">
    <li class="menu-item">
      <a href="index">Home</a>
    </li>
    <li class="menu-item menu-item-has-children">
      <a>Hosting <div class="badge badge-pill bg-purple">PRO</div></a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="hosting">Shared Hosting</a></li>
        <li class="menu-item"><a href="reseller">Cloud Reseller</a></li>
        <li class="menu-item"><a href="dedicated">Dedicated Server</a></li>
        <li class="menu-item"><a href="vps">Cloud VPS</a></li>
        <li class="menu-item"><a href="wordpress">WordPress Hosting</a></li>
        <li class="menu-item"><a href="domains">Domain Names</a></li>
        <li class="menu-item"><a href="developer">Developer Hosting</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children">
      <a>Pages</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="ssl">SSL Certificates</a></li>
        <li class="menu-item"><a href="email">Enterprise Email</a></li>
        <li class="menu-item"><a href="magento">Magento Pro</a></li>
        <li class="menu-item"><a href="database">Database-as-a-Service</a></li>
        <li class="menu-item"><a href="ddos">DDoS Protection</a></li>
        <li class="menu-item"><a href="datacenter">Datacenter</a></li>
        <li class="menu-item"><a href="about">About Us</a></li>
        <li class="menu-item"><a href="soon">Coming Soon</a></li>
        <li class="menu-item"><a href="checkout">Checkout</a></li>
        <li class="menu-item"><a href="cart">Cart</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children">
      <a>Features</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="pricing">Pricing Options</a></li>
        <li class="menu-item"><a href="sliders">Content Sliders</a></li>
        <li class="menu-item"><a href="configurator">Configurator</a></li>
        <li class="menu-item"><a href="404">404 Error</a></li>
        <li class="menu-item"><a href="login">Register</a></li>
        <li class="menu-item"><a href="login">Client Area</a></li>
        <li class="menu-item"><a href="elements">Elements</a></li>
        <li class="menu-item"><a href="sections">Sections</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children menu-last">
      <a>Support</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="knowledgebase-list">Knowlegebase List</a></li>
        <li class="menu-item"><a href="knowledgebase-article">Knowlegebase Article</a></li>
        <li class="menu-item"><a href="contact">Contact Us</a></li>
        <li class="menu-item"><a href="legal">Legal</a></li>
        <li class="menu-item"><a href="blog">Blog</a></li>
        <li class="menu-item"><a href="faq">Faq</a></li>
      </ul>
    </li>
    <li class="mt-4">
      <a href="tel:+0000000000"><p class="c-grey">Phone: + (123) 1300-656-1046</p></a>
      <a href="mailto:[email protected]"><p class="c-grey">Email: [email protected]</p></a>
    </li>
    <li>
      <a href="login"><div class="btn btn-default-yellow-fill mt-3">CLIENT AREA</div></a>
    </li>
  </ul>
</nav>

HTML Structure

Grid System:

This Template has a Responsive layout and is based on the Bootstrap Framework. For more info visit Bootstrap.
Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Nesting Columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
      Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
      Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

CSS Structure

These are the css files that are loaded into templates in Head Section.

<link href="fonts/cloudicon/cloudicon.css" rel="stylesheet">
<link href="fonts/fontawesome/css/all.css" rel="stylesheet">
<link href="fonts/opensans/opensans.css" rel="stylesheet">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/swiper.min.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="css/slick.css" rel="stylesheet">

Custom color styles:
<link href="css/colors/pink.css" rel="stylesheet" title="pink"/>
<link href="css/colors/blue.css" rel="stylesheet" title="blue"/>
<link href="css/colors/green.css" rel="stylesheet" title="green"/>

JavaScript Structure

These are the JS files that are loaded into templates in end of the body section.

<script src="js/jquery.min.js"></script>
<script src="js/typed.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/jquery.viewportchecker.min.js"></script>
<script src="js/jquery.circliful.min.js"></script<
<script src="js/jquery.countdown.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/isotope.min.js"></script>
<script src="js/wow.min.js"></script>
<script>new WOW().init();</script>
<script src="js/lazysize.min.js"></script>
<script src="js/scripts.min.js"></script>

Integration WHMCS

Believe, Antler Template it is one of the few templates in the Themeforest section that already comes with integration of login, domain search and hosting & VPS plans as example.

Login Integration

Please, open the login.html file and search for the below action tag:

<form action="http://inebur.com/whmcs/dologin.php?systpl=antler" method="post" class="comments-form">

Here, in the "action" tag, put your redirect link to the WHMCS login page. We show a practical example below

<form action="http://yourdomain.com/whmcs/dologin.php">

Now, and according the WHMCS DOCs here, do you need implement the below line code inside the "configuration.php" file, on your WHMCS root.

$allow_external_login_forms = true;

After then, go to login page, put your access data and click the login button. You will be redirected to the home page in your WHMCS template. That's it!

Domains Search Integration

Please, open the "domains.html" file and search for the below action tag:

<form class="mb-5 nomargin" action="http://inebur.com/whmcs/domainchecker.php?carttpl=antler&systpl=antler" method="post">

Here, in the "action" tag, put your redirect link to the WHMCS domain search page. We show a practical example below

<form action="http://yourdomain.com/whmcs/domainchecker.php">

Now, go to domain page, search for your perfect domain and click the search button. You will be redirected to the domain page in your WHMCS template. That's it!

Hosting Plans Integration

Please, check hosting.html file in 111 line as example

<a href="http://inebur.com/whmcs/cart.php?a=add&pid=1" class="btn btn-default-yellow-fill">Order now</a>

Here, in the "a" tag, put the direct link from your WHMCS hosting page. We show a practical example below

<a href="http://yourdomain.com/whmcs/cart.php?a=add&pid=1"></a>

Now, go to hosting page and click the order now button. You will be redirected to the hosting page in your WHMCS template. That's it!