<!-- Header -->
<header id="js-header" class="u-header u-header--static u-header--show-hide u-header--change-appearance"
        data-header-fix-moment="500"
        data-header-fix-effect="slide">
  <div class="text-center u-header__section u-header__section--light g-bg-white g-py-20">
    <!-- Logo -->
    <a href="{{ root }}index.html" class="navbar-brand">
      <img src="{{ root }}assets/img/logo/logo-1.png" alt="Image Description">
    </a>
    <!-- End Logo -->
  </div>

  <div class="u-header__section u-header__section--light g-bg-white g-py-15 g-py-0--lg"
       data-header-fix-moment-classes="u-shadow-v18">
    <nav class="navbar navbar-expand-lg py-0">
      <div class="container">
        <!-- Responsive Toggle Button -->
        <button class="navbar-toggler navbar-toggler-right btn g-line-height-1 g-brd-none g-pa-0 mx-auto" type="button" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navBar"
                data-toggle="collapse"
                data-target="#navBar">
          <span class="hamburger hamburger--slider">
            <span class="hamburger-box">
              <span class="hamburger-inner"></span>
            </span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <!-- Navigation -->
        <div class="collapse navbar-collapse align-items-center flex-sm-row g-pt-10 g-pt-0--lg" id="navBar">
          <ul class="navbar-nav text-uppercase g-font-weight-600 mx-auto">
            <li class="nav-item{% if mainNavActive_1 == 'home' %} active{% endif %}">
              <a href="#" class="nav-link g-py-15 g-px-20--lg">Home
                {% if mainNavActive_1 == 'home' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'pages' %} active{% endif %}">
              <a href="#" class="nav-link g-py-15 g-px-20--lg">Pages
                {% if mainNavActive_1 == 'pages' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'blog' %} active{% endif %}">
              <a href="#" class="nav-link g-py-15 g-px-20--lg">Blog
                {% if mainNavActive_1 == 'blog' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'portfolio' %} active{% endif %}">
              <a href="#" class="nav-link g-py-15 g-px-20--lg">Portfolio
                {% if mainNavActive_1 == 'portfolio' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'features' %} active{% endif %}">
              <a href="#" class="nav-link g-py-15 g-px-20--lg">Features
                {% if mainNavActive_1 == 'features' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'shortcodes' %} active{% endif %}">
              <a href="#" class="nav-link g-py-15 g-px-20--lg">Shortcodes
                {% if mainNavActive_1 == 'shortcodes' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'demos' %} active{% endif %}">
              <a href="#" class="nav-link g-py-15 g-px-20--lg">Demos
                {% if mainNavActive_1 == 'demos' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-pos-rel g-width-300">
              <a href="#" class="d-inline-block g-font-size-18 g-color-gray-dark-v5 g-py-10 g-px-20--lg"
                 aria-haspopup="true"
                 aria-expanded="false"
                 aria-controls="searchform-1"
                 data-dropdown-target="#searchform-1"
                 data-dropdown-type="css-animation"
                 data-dropdown-duration="300"
                 data-dropdown-animation-in="fadeInUp"
                 data-dropdown-animation-out="fadeOutDown">
                <i class="fa fa-search"></i>
              </a>

              <!-- Search Form -->
              <form id="searchform-1" class="u-searchform-v1 u-dropdown--css-animation u-dropdown--hidden g-bg-white g-pa-10">
                <div class="input-group g-brd-primary--focus">
                  <input class="form-control rounded-0 u-form-control" type="search" placeholder="Enter Your Search Here...">

                  <div class="input-group-addon p-0">
                    <button class="btn rounded-0 btn-primary btn-md g-font-size-14 g-px-18" type="submit">Go</button>
                  </div>
                </div>
              </form>
              <!-- End Search Form -->
            </li>
          </ul>
        </div>
        <!-- End Navigation -->
      </div>
    </nav>
  </div>
</header>
<!-- End Header -->
