Setting the Navigation

Here is the HTML code for the basic structure of Dekstop navigation

<ul class="nav_menu">
    <li class="has_child">
        <a 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 href="#!">Pages</a>
        <ul class="nav_menu_child">
            <li class="has_child"><a href="#!">About</a>
                <ul class="nav_menu_child">
                    <li><a href="about.html">About 1</a></li>
                    <li><a href="about-2.html">About 2</a></li>
                </ul>
            </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>
        <!-- /.nav_menu_child -->
    </li>
    <li><a href="events.html">Events</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li class="has_child">
        <a href="#!">Blog</a>
        <ul class="nav_menu_child">
            <li><a href="blog.html">Blog Sidebar</a></li>
            <li><a href="blog-left.html">Blog Left Sidebar</a></li>
            <li><a href="single-blog.html">Post Sidebar</a></li>
            <li><a href="single-blog-left.html">Post Left Sidebar</a></li>
        </ul>
        <!-- /.nav_menu_child -->
    </li>
</ul>

Make sure to add class has_child into li that has another list ul inside of it. And those ul need to have nav_menu_child class.

Here is the example code for new desktop navigation :

<ul class="nav_menu">
    <li>Doesn't have child</li>
    <li class="has_child">
        Need has_child class
        <ul class="nav_menu_child">
            <li>Those ul need nav_menu_child</li>
            <li class="has_child">
                Has another child
                <ul class="nav_menu_child">
                    <li>Insert nav_menu_child in ul parent</li>
                    <li>....</li>
                </ul>
            </li>
            <li>....</li>
        </ul>
    </li>
    <li>...</li>
</ul>

Here is the HTML code for the basic structure of 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-x"></i></button>
    </div>
    <div class="offcanvas-body">
        <a href="index.html" class="logo_mobile"><img src="img/logo.png" alt="image"></a>


        <ul class="mobile_menu">
            <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 class="mdropdown"><a href="#!">About</a>
                        <ul class="mdropdown_child">
                            <li><a href="about.html">About 1</a></li>
                            <li><a href="about-2.html">About 2</a></li>
                        </ul>
                    </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>
                <!-- /.mdropdown -->
            </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 Sidebar</a></li>
                    <li><a href="blog-left.html">Blog Left Sidebar</a></li>
                    <li><a href="single-blog.html">Post Sidebar</a></li>
                    <li><a href="single-blog-left.html">Post Left Sidebar</a></li>
                </ul>
            </li>
        </ul>
        <!-- mobile_menu -->
    </div>
</div>

This code below is needed for offcanvas button on mobile view

<div class="offcanvas-header">
    <button class="close_mb" data-bs-dismiss="offcanvas" aria-label="Close"><i class="ph-x"></i></button>
</div>

Like the dekstop navigation, the ul and li that has child need to have a class.

For ul with child it need class mdropdown_child.

For the li with child it need class mdropdown

Here is the example code for new mobile navigation:

<ul class="mobile_menu">
    <!-- li has class -->
    <li class="mdropdown">
        <!-- ul need class -->
        <ul class="mdropdown_child">
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>...</li>
    <li>...</li>
</ul>

Setting the Navigation

Desktop Navigation

Mobile Navigation