Configuring the Navigation

Here is the HTML code for the basic structure of the desktop navigation:

<!-- ======================================================================= -->
<!--                        DESKTOP NAVIGATION START                         -->
<!-- ======================================================================= -->
<ul
  class="list-unstyled fw-medium d-flex align-items-center justify-content-end m-0 gap-0"
>
  <li class="has_child">
    <a class="p-2" href="#!">Home</a>
    <ul class="nav_menu_child">
      <li><a href="index-1.html">Home 1</a></li>
      <li><a href="index-2.html">Home 2</a></li>
      <li><a href="index-3.html">Home 3</a></li>
      <li><a href="index-4.html">Home 4</a></li>
      <li><a href="index-5.html">Home 5</a></li>
    </ul>
  </li>
  <li class="has_child">
    <a class="p-2" href="#!">Pages</a>
    <ul class="nav_menu_child">
      <li><a href="about.html">About</a></li>
      <li><a href="events.html">Events</a></li>
      <li><a href="single-event.html">Single Event</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </li>
  <li><a class="p-2" href="events.html">Events</a></li>
  <li><a class="p-2" href="contact.html">Contact</a></li>
  <li class="has_child">
    <a class="p-2" href="#!">Blog</a>
    <ul class="nav_menu_child">
      <li><a href="blog.html">Blog Page</a></li>
      <li><a href="single-blog.html">Single Blog</a></li>
    </ul>
  </li>
</ul>
<!-- /.list-unstyled -->
<!-- ======================================================================= -->
<!--                         DESKTOP NAVIGATION END                          -->
<!-- ======================================================================= -->

Make sure to add the has_child class to the <li> elements that contain another list (<ul>) inside them. Additionally, those nested <ul> elements should have the nav_menu_child class applied to them.

Here is an example code for the new desktop navigation:

<ul class="list-unstyled mobile_menu smoothscroll mb-auto">
  <li class="mdropdown">
    <a href="#!">Home</a>
    <ul class="mdropdown_child">
      <li><a href="index-1.html">Home 1</a></li>
      <li><a href="index-2.html">Home 2</a></li>
      <li><a href="index-3.html">Home 3</a></li>
      <li><a href="index-4.html">Home 4</a></li>
      <li><a href="index-5.html">Home 5</a></li>
    </ul>
  </li>
  <li class="mdropdown">
    <a href="#!">Pages</a>
    <ul class="mdropdown_child">
      <li><a href="about.html">About</a></li>
      <li><a href="events.html">Events</a></li>
      <li><a href="single-event.html">Single Event</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </li>
  <li><a href="events.html">Events</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li class="mdropdown">
    <a href="#!">Blog</a>
    <ul class="mdropdown_child">
      <li><a href="blog.html">Blog Page</a></li>
      <li><a href="single-blog.html">Single Blog</a></li>
    </ul>
  </li>
</ul>
<!-- mobile_menu -->

In the above example, the "Home" <li> element has the has_child class, indicating that it contains a nested list. The nested list is wrapped with a <ul> element that has the nav_menu_child class applied to it.

Here is the HTML code for the basic structure of the mobile navigation:

<!-- ======================================================================= -->
<!--                          offcanvas mobile menu                          -->
<!-- ======================================================================= -->
<div
  class="mobile_menu_container offcanvas offcanvas-start"
  tabindex="-1"
  data-bs-scroll="true"
  id="mobilemenu"
>
  <div class="offcanvas-header">
    <button class="close_mb" data-bs-dismiss="offcanvas" aria-label="Close">
      <i class="ph ph-x"></i>
    </button>
  </div>
  <div class="offcanvas-body">
    <a href="index.html" class="logo_mobile">
      <img src="img/general/logo-footer.png" alt="image" />
    </a>

    <ul class="list-unstyled mobile_menu smoothscroll">
      <li>
        <a
          data-bs-dismiss="offcanvas"
          data-bs-target="#mobilemenu"
          href="#home"
        >
          Home
        </a>
      </li>
      <li>
        <a
          data-bs-dismiss="offcanvas"
          data-bs-target="#mobilemenu"
          href="#about"
        >
          About
        </a>
      </li>
      <li>
        <a
          data-bs-dismiss="offcanvas"
          data-bs-target="#mobilemenu"
          href="#services"
        >
          Services
        </a>
      </li>
      <li>
        <a
          data-bs-dismiss="offcanvas"
          data-bs-target="#mobilemenu"
          href="#works"
        >
          Works
        </a>
      </li>
      <li>
        <a
          data-bs-dismiss="offcanvas"
          data-bs-target="#mobilemenu"
          href="#team"
        >
          Team
        </a>
      </li>
      <li>
        <a
          data-bs-dismiss="offcanvas"
          data-bs-target="#mobilemenu"
          href="#contact"
        >
          Contact
        </a>
      </li>
      <li class="mdropdown">
        <a href="#!">Blog</a>
        <ul class="mdropdown_child">
          <li><a href="blog.html">Blog Page</a></li>
          <li><a href="single-blog.html">Single Blog</a></li>
        </ul>
      </li>
    </ul>
    <!-- mobile_menu -->
  </div>
  <!-- offcanvas-body -->
</div>
<!-- mobile_menu_container -->
<!-- ======================================================================= -->
<!--                        offcanvas mobile menu end                        -->
<!-- ======================================================================= -->

Similar to the desktop navigation, the <ul> and <li> elements that have child elements in the mobile navigation should have specific classes:

For <ul> elements with child elements, use the class mdropdown_child.
For <li> elements with child elements, use the class mdropdown.

Here is an example code for the new mobile navigation:

<ul class="list-unstyled mobile_menu smoothscroll">
  <li>
    <a data-bs-dismiss="offcanvas" data-bs-target="#mobilemenu" href="#home">
      Home
    </a>
  </li>

  <!-- li has class -->
  <li class="mdropdown">
    <a href="#">About</a>
    <!-- ul need class -->
    <ul class="mdropdown_child">
      <li><a href="#">Mission</a></li>
      <li><a href="#">Vision</a></li>
      <li><a href="#">Values</a></li>
    </ul>
  </li>
  <li>...</li>
  <li>...</li>
</ul>

In the above example, the <ul> element with child elements has the class mdropdown_child, and the <li> element with child elements has the class mdropdown.

Configuring the Navigation

Desktop Navigation

Mobile Navigation