Navigation type 2

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

 <nav class="navigation navigation-type-2 navigation-fixed">
        <div class="container">
            <div class="inner-wrapper">
                <div class="logo-wrapper">
                    <a href="index.html">
                        <img src="assets/img/general/logo.png" alt="Logotype" class="logo">
                    </a>
                </div>
                <div class="menu-side">
                    <ul class="menu-list">
                        <li class="menu-item menu-item-has-children">
                            <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 class="search-toggle-wrapper">
                        <div class="search-toggle">
                            <i class="icofont-search-1"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-form">
            <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 class="search-form-close">
                    <i class="icofont-close"></i>
                </div>
            </div>
        </div>
    </nav>

The navigation bar has 3 main parts:

1.Logo

 <div class="logo-wrapper">
                    <a href="index.html">
                        <img src="assets/img/general/logo.png" alt="Logotype" class="logo">
                    </a>
                </div>

2.Menu

<div class="menu-side">
    <ul class="menu-list">
     
    </ul>
</div>

3.Search Form

 <div class="search-form">
            <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 class="search-form-close">
                    <i class="icofont-close"></i>
                </div>
            </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:

this.itemsHasChildren.on('mouseenter', function () {
                let subMenu = $(this).children('.sub-menu');
                TweenMax.to(subMenu, 0.25, {
                    transform: 'translateY(0)',
                    opacity: 1,
                    pointerEvents: 'auto',
                    className: "+=active-sub-menu",
                    ease: Elastic,
                }).play();
            }).on('mouseleave', function () {
                let subMenu = $(this).children('.sub-menu');
                TweenMax.to(subMenu, 0.25, {
                    transform: 'translateY(10px)',
                    opacity: 0,
                    pointerEvents: 'none',
                    className: "-=active-sub-menu",
                    ease: Elastic,
                }).play();
            });