Notice: Undefined offset: 0 in /var/www/html/jk-studio-dev.com/wp-content/themes/jk-studio-dev/template-parts/docs/docs-single.php on line 80

Notice: Trying to get property 'ID' of non-object in /var/www/html/jk-studio-dev.com/wp-content/themes/jk-studio-dev/template-parts/docs/docs-single.php on line 80

Notice: Undefined offset: 0 in /var/www/html/jk-studio-dev.com/wp-content/themes/jk-studio-dev/template-parts/docs/page-header.php on line 62

Notice: Trying to get property 'ID' of non-object in /var/www/html/jk-studio-dev.com/wp-content/themes/jk-studio-dev/template-parts/docs/page-header.php on line 62

Notice: Undefined offset: 0 in /var/www/html/jk-studio-dev.com/wp-content/themes/jk-studio-dev/template-parts/docs/page-header.php on line 81

Notice: Trying to get property 'ID' of non-object in /var/www/html/jk-studio-dev.com/wp-content/themes/jk-studio-dev/template-parts/docs/page-header.php on line 81

Andale – Creative HTML5 Portfolio Template

  • 45 Articles
  • Current Version: 1.4

Notice: Undefined offset: 0 in /var/www/html/jk-studio-dev.com/wp-content/themes/jk-studio-dev/template-parts/docs/sidebar.php on line 35

Notice: Trying to get property 'ID' of non-object in /var/www/html/jk-studio-dev.com/wp-content/themes/jk-studio-dev/template-parts/docs/sidebar.php on line 35
HomeDocumentationsNavigation type 3

Last Modified: August 14, 2019

To add a navigation menu type 2, insert the following code on your page, and customize it for yourself:

<nav class="navigation navigation-type-3 navigation-fixed">
        <div class="container">
            <div class="inner-wrapper">
                <div class="menu-toggle-wrapper meta-wrapper">
                    <span class="meta-text">
                        Menu
                    </span>
                    <div class="menu-toggle">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="search-toggle-wrapper meta-wrapper">
                    <span class="meta-text">
                        Search
                    </span>
                    <div class="search-toggle">
                        <i class="icofont-search-1"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="navigation-panel">
            <div class="container-fluid panel-inner">
                <div class="meta-wrapper menu-panel-close-wrapper">
                        <span class="meta-text">
                    Close Menu
                    </span>
                    <i class="icofont-close-circled"></i>
                </div>
                <div class="menu-list-wrapper" data-back-link="go back">
                    <ul class="menu-list">
                        <li class="menu-item menu-item-has-children" data-menu-subtitle="Strategy">
                            <a>
                                Pages
                            </a>
                            <ul class="sub-menu">
                                <li class="menu-item">
                                   <a href="about.html">
                                        About
                                          <span class="menu-item-label" style="background-color: #F30E48;">
                                            Hot
                                        </span>
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="services.html">
                                        Services
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="team.html">
                                        Team
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="contact.html">
                                        Contact
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="pricing.html">
                                        Pricing
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="faq.html">
                                        FAQ
                                    </a>
                                </li>


                                <li class="menu-item">
                                    <a href="404.html">
                                        404 Error Page
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="search-form">
            <div class="meta-wrapper form-close-wrapper">
                        <span class="meta-text">
                    Close Form
                    </span>
                <i class="icofont-close-circled"></i>
            </div>
            <div class="form-wrapper container">
                <form role="search">
                    <input class="search-field"
                           placeholder="Enter some keywords..."
                           title="Enter some keywords...">
                    <button type="submit" class="search-submit">
                        <i class="icofont-search-1"></i>
                    </button>
                </form>
                <span class="subtitle-text">
                        Hit enter to search or ESC to close
                        </span>
            </div>
        </div>
    </nav>

The navigation panel has 2 main parts:

1.Menu

<div class="menu-list-wrapper" data-back-link="go back">
   <ul class="menu-list">
                       
   </ul>
</div>

2.Search Form

 <div class="search-form">
            <div class="meta-wrapper form-close-wrapper">
                        <span class="meta-text">
                    Close Form
                    </span>
                <i class="icofont-close-circled"></i>
            </div>
            <div class="form-wrapper container">
                <form role="search">
                    <input class="search-field"
                           placeholder="Enter some keywords..."
                           title="Enter some keywords...">
                    <button type="submit" class="search-submit">
                        <i class="icofont-search-1"></i>
                    </button>
                </form>
                <span class="subtitle-text">
                        Hit enter to search or ESC to close
                        </span>
            </div>
        </div>

You can also configure the animation, animation speed and other parameters using the desired class in javascript, for this, go to main.js and change the following values:

let navigation = this.navigation,
                animItems = (items) => {
                    TweenMax.staggerTo(items, 0.45, {
                        transform: 'translateY(0)',
                        opacity: 1,
                        pointerEvents: 'auto',
                        ease: Power3.easeInOut
                    }, 0.06);
                },
                hideItems = (items) => {
                    TweenMax.staggerTo(items, 0.45, {
                        transform: 'translateY(-30px)',
                        opacity: 0,
                        pointerEvents: 'none',
                        ease: Power3.easeInOut
                    }, 0.06);
                };