<!-- Header -->
<header id="js-header" class="u-header u-header--static--lg u-header--show-hide--lg u-header--change-appearance--lg"
        data-header-fix-moment="500"
        data-header-fix-effect="slide">
  <div class="u-header__section u-header__section--light g-bg-white g-transition-0_3 g-py-10"
       data-header-fix-moment-exclude="g-bg-white g-py-10"
       data-header-fix-moment-classes="g-bg-white-opacity-0_7 u-shadow-v18 g-py-0">
    <nav class="js-mega-menu navbar navbar-expand-lg">
      <div class="container">
        <!-- Responsive Toggle Button -->
        <button class="navbar-toggler navbar-toggler-right btn g-line-height-1 g-brd-none g-pa-0 g-pos-abs g-top-3 g-right-0" 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 -->
        <!-- Logo -->
        <a href="{{ root }}index.html" class="navbar-brand">
          <img src="{{ root }}assets/img/logo/logo-1.png" alt="Image Description">
        </a>
        <!-- End Logo -->

        <!-- Navigation -->
        <div class="collapse navbar-collapse align-items-center flex-sm-row g-pt-10 g-pt-5--lg" id="navBar">
          <ul class="navbar-nav ml-auto text-uppercase g-font-weight-600 u-main-nav-v8 u-sub-menu-v1">
            <li class="nav-item g-mx-2--md g-mx-5--xl g-mb-5 g-mb-0--lg{% if mainNavActive_1 == 'home' %} active{% endif %}">
              <a href="#!" class="nav-link">Home
                {% if mainNavActive_1 == 'home' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item hs-has-sub-menu g-mx-2--md g-mx-5--xl g-mb-5 g-mb-0--lg{% if mainNavActive_1 == 'pages' %} active{% endif %}">
              <a href="#!" class="nav-link" id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">Pages
                {% if mainNavActive_1 == 'pages' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
              <!-- Submenu -->
              <ul class="hs-sub-menu list-unstyled g-mt-17--lg g-mt-7--lg--scrolling" id="nav-submenu-1"
                  aria-labelledby="nav-link-1">
                <li>
                  <a href="#!">Page 1</a>
                </li>
                <li class="active hs-has-sub-menu">
                  <a href="#!" id="nav-link-2"
                     aria-haspopup="true"
                     aria-expanded="false"
                     aria-controls="nav-submenu-2">Page 2
                  </a>
                  <!-- Submenu (level 2) -->
                  <ul class="hs-sub-menu list-unstyled" id="nav-submenu-2"
                      aria-labelledby="nav-link-2">
                    <li class="active dropdown-item">
                      <a href="#!">Page 2-1</a>
                    </li>
                    <li class="dropdown-item">
                      <a href="#!">Page 2-2</a>
                    </li>
                    <li class="dropdown-item">
                      <a href="#!">Page 2-3</a>
                    </li>
                    <li class="dropdown-item">
                      <a href="#!">Page 2-4</a>
                    </li>
                    <li class="dropdown-item">
                      <a href="#!">Page 2-5</a>
                    </li>
                  </ul>
                  <!-- End Submenu (level 2) -->
                </li>
                <li>
                  <a href="#!">Page 3</a>
                </li>
                <li>
                  <a href="#!">Page 4</a>
                </li>
                <li>
                  <a href="#!">Page 5</a>
                </li>
                <li>
                  <a href="#!">Page 6</a>
                </li>
                <li>
                  <a href="#!">Page 7</a>
                </li>
              </ul>
              <!-- End Submenu -->
            </li>
            <li class="nav-item g-mx-2--md g-mx-5--xl g-mb-5 g-mb-0--lg{% if mainNavActive_1 == 'features' %} active{% endif %}">
              <a href="#!" class="nav-link">Features
                {% if mainNavActive_1 == 'features' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-mx-2--md g-mx-5--xl g-mb-5 g-mb-0--lg{% if mainNavActive_1 == 'shortcodes' %} active{% endif %}">
              <a href="#!" class="nav-link">Shortcodes
                {% if mainNavActive_1 == 'shortcodes' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-mx-2--md g-mx-5--xl g-mb-5 g-mb-0--lg{% if mainNavActive_1 == 'demos' %} active{% endif %}">
              <a href="#!" class="nav-link">Demos
                {% if mainNavActive_1 == 'demos' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-mx-2--md g-mx-5--xl g-mb-5 g-mb-0--lg{% if mainNavActive_1 == 'whats-new' %} active{% endif %}">
              <a href="#!" class="nav-link">What's New
                {% if mainNavActive_1 == 'whats-new' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
          </ul>
        </div>
        <!-- End Navigation -->
      </div>
    </nav>
  </div>
</header>
<!-- End Header -->
