html

 <div class="mobile-nav">
            <div class="container">
                <div class="row">
                    <div class="col-md-2">
                        <div id="clickBtn" class="clickBtn toggle-btn">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="bgoverly">
                            <div id="sideBar" class="sidebar">
                                <div class="top_sect_menu">
                                    <div class="topsecleft">
                                        <?php the_custom_logo(); ?>
                                    </div>
                                    <div class="close">
                                        <img src="<?php echo get_template_directory_uri(); ?>/img/closeX.png"
                                            alt="close">
                                    </div>
                                </div>
                                <?php
                                wp_nav_menu(
                                    array(
                                        'theme_location' => 'mobile-menu',
                                        'menu_id' => '-1',
                                    )
                                ); ?>
                                <div class="mobile-bottom-sect">
                                    <a class="mobile-contact" href="">Contact Us</a>
                                    <div class="mobile-icons">
                                        <a href=""><i class="fa-brands fa-facebook-f"></i></a>
                                        <a href=""><i class="fa-brands fa-twitter"></i></a>
                                        <a href=""><i class="fa-brands fa-linkedin-in"></i></a>
                                        <a href=""><i class="fa-brands fa-instagram"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="mobile-logo">
                            <?php the_custom_logo(); ?>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mobile-login">
                            <a href="" class="header-btn2">Get Free Trial</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>



css






div#clickBtn {
    cursor: pointer;
    position: relative;
    z-index: 9999;
}

.top_sect_menu {
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;
}

.mobile-logo {
    text-align: center;
}

.mobile-nav .col-md-3 {
    display: flex;
    justify-content: end;
    align-items: center;
}

.mobile-nav .col-md-2 {
    display: flex;
    align-items: center;
}

.bgoverly {
    position: fixed;
    top: 0;
    left: -10000px;
    width: 100%;
    height: 100%;
    background: #0000005e;
    z-index: 9999999999999999999999999999;
    transition: all 0.75s;
}

.toggle-btn span {
    width: 40px;
    height: 4px;
    background: #000;
    margin: 8px 0;
    display: block;
    transition: .5s;
    border-radius: 10px;
}

#sideBar.active,
.bgoverly.active {
    left: 0px !important;
    transition: all 0.25s;
}

#sideBar {
    margin: 0;
    position: fixed;
    width: 555px;
    height: 100%;
    top: 0;
    background: #fff;
    /*left: -4000px;*/
    transition: all 0.75s;
    padding: 35px 50px 30px 40px;
    /* overflow: scroll; */
}

.close {
    text-align: end;
    cursor: pointer;

}

.menu-mobile-menu-container {
    padding-top: 60px;
}

.menu-mobile-menu-container ul {
    margin: 0;
    padding: 0;
}

.menu-mobile-menu-container li {
    list-style: none;
    margin-bottom: 30px;
}

.menu-mobile-menu-container a {
    text-decoration: none;
    color: #091e1c;
    font-family: 'ClashGrotesk';
    font-size: 30px;
    font-weight: 600;
}

.mobile-contact {
    padding: 14px 46px;
    background-color: #ef6023;
    color: #fff;
    text-decoration: none;
    font-size: 23px;
    font-family: 'ClashGrotesk';
    font-weight: 600;
    border-radius: 10px;

}

.mobile-bottom-sect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 70px;
}

.mobile-icons a {
    margin-right: -12px;
    display: flex;
    background-color: #0f513e;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    border-radius: 100%;
    border: 4px solid white;
}

.mobile-icons {
    display: flex;
    gap: 2px;
    justify-content: end;
}

.mobile-nav {
    display: none;
}




js





jQuery(".clickBtn").on('click', function () {
    jQuery(".sideBar").addClass('active');
    jQuery(".bgoverly").addClass('active');
    jQuery('body').addClass('active-nav');
});
jQuery('.bgoverly').on('click', function () {
    jQuery("#sideBar").removeClass('active');
    jQuery(".bgoverly").removeClass('active');
    jQuery('body').removeClass('active-nav');
});


jQuery('a[href^="#"]').on('click', function (e) {
    e.closeNav();
    e.preventDefault();
});




hamber gur 2
document.addEventListener("DOMContentLoaded", function () {
    const clickBtn = document.querySelector(".clickBtn");
    const sideBar = document.querySelector(".sidebar");
    const bgOverlay = document.querySelector(".bgoverly");
    const body = document.body;

    const openMenuHTML = `
        <div class="three-toggle">
              <span class="short-line"></span>
              <span class="large-line"></span>
              <span class="short-line"></span>
        </div>`;
    const closeMenuHTML = `
        <div class="make-close">
            <img src="https://mmcgbl.com/wp-content/uploads/2024/11/closeX.webp" alt="close">
        </div>`;

    clickBtn.addEventListener("click", function () {
        const isSidebarOpen = sideBar.classList.contains("active");
        sideBar.classList.toggle("active");
        bgOverlay.classList.toggle("active");
        body.classList.toggle("sidebar-open");
        if (isSidebarOpen) {
            clickBtn.innerHTML = openMenuHTML;
        } else {
            clickBtn.innerHTML = closeMenuHTML;
        }
    });

    const menuItems = document.querySelectorAll(".mega-menu-item.nav-item.has-submenu");
    menuItems.forEach((item) => {
        const subMenu = item.querySelector(".sub-menu");
        item.addEventListener("click", function(event) {
            event.preventDefault();
            menuItems.forEach(otherItem => {
                const otherSubMenu = otherItem.querySelector(".sub-menu");
                if (otherSubMenu !== subMenu) {
                    otherSubMenu.classList.remove("open");
                    otherItem.classList.remove("open");
                }
            });
            subMenu.classList.toggle("open");
            item.classList.toggle("open");
        });

        const subMenuLinks = subMenu.querySelectorAll("a");
        subMenuLinks.forEach((link) => {
            link.addEventListener("click", function(event) {
                event.stopPropagation();
            });
        });
    });
});

?>
<div class="mobile-custome-menu">
    <div id="clickBtn" class="clickBtn toggle-btn">
        <div class="three-toggle">
            <span class="short-line"></span>
            <span class="large-line"></span>
            <span class="short-line"></span>
        </div>
    </div>
    <div class="bgoverly">
        <div id="sideBar" class="sidebar">
            <?php
          wp_nav_menu(array(
         'menu' => 'Home New Mobile',
          'menu_id' => '-1',
           ));
           ?>
        </div>
    </div>
</div>