<pushmenu>
    <a id="hamburg" href="#">
        <div class="nav-cross">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </a>
    <div id="menuoverlay"></div>
    <nav class="nav1">
        <div class="container">
            <div class="row">
                <?php
                // Display the logo (replace 'your-logo-image-url' with your logo image URL)
                echo '<div class="push-logo"><img src="https://diane.demoweblink.xyz/wp-content/uploads/2023/07/Screenshot_2023-07-27_165752-removebg-preview.png" alt=""></div>';

                // Display the mobile menu
                wp_nav_menu(array(
                    'theme_location' => 'main-menu', // Use the menu location you defined in your theme
                    'container_class' => 'menu',
                    'menu_class' => 'menu',
                    'fallback_cb' => false
                ));
                ?>
            </div>
        </div>
    </nav>
</pushmenu>
		
<?php 
	function register_mobile_menu() {
    register_nav_menu('mobile-menu', 'Mobile Menu');
}
	add_action('after_setup_theme', 'register_mobile_menu');
		
?>

/*----------------------------------------css---------------------------------*/
/*----------------------------------------Push Navigation---------------------------------*/
div#menuoverlay { display: none; }
a#hamburg { position: fixed; top: 10px; left: 10px; width: 40px; height: 40px; z-index: 9999999; text-align: center; color: white; display: none; transition: all ease-out 0.3s; }
a#hamburg i { position: relative; top: 50%; transform: translateY(-50%); }
.nav1 { transition: all ease-out 0.3s; display: none; }
.nav1 a { color: #fff; font-size: 13px; }
.nav1 ul { margin: 0; padding: 0; background-color: #303030; }
.nav1 ul li { display: inline-block; position: relative; }
.nav1 ul li>a { display: inline-block; padding: 10px; }
.nav1 ul li>a>i { margin-left: 15px; transition: all ease-out 0.3s; -webkit-transition: all ease-out 0.1s; }
.nav1 ul li ul { display: none; position: absolute; top: 38px; background: #222; width: 200px; text-align: left; }
.nav1 .search-nav,.nav1 .title { display: none; }
.nav1 ul li ul li { display: block; }
.nav1 ul li ul li a { display: block; }
.nav1 ul li:hover>a { color: #000; text-decoration: none; }
.nav1 ul li:hover>a>i { transform: rotateZ(90deg); }
.nav1 ul li:hover ul { display: block; }
.nav1 span.marrow { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; float: right; height: 0; margin: 8px 0 0 8px; width: 0; }
.nav1 ul li.open span.marrow { border-left: 5px solid transparent; border-top: 0; border-right: 5px solid transparent; border-bottom: 5px solid #fff; }
@media screen and (max-width:991px) {
 a#hamburg { display: block; }
 main { transition: all ease-out 0.3s; }
 .nav1 .row { margin: 0px; }
 .nav1 {background: #0b2a39;box-shadow: -2px 0 0px #ec0303 inset;display: block;height: 100%;left: 0;overflow-x: hidden;overflow-y: auto;position: fixed;top: 0;transform: translateX(-250px);width: 250px;}
 .nav1 .search-nav,.nav1 .title { display: block; }
 .nav1 .search-nav input { border: 1px solid #2c313f; background-color: rgba(255, 255, 255, 0.2); padding: 5px; width: 100%; color: #000; margin: 10px 0; }
 .nav1 .search-nav input[type="submit"] { background: url("images/search-icon.png") no-repeat scroll center center; border: 0; width: auto; font-size: 0; height: 16px; position: absolute; right: 7px; top: 8px; width: 16px; filter: invert(100%); }
 .nav1 .title { background: #000; color: #fff; font-size: 14px; margin: 0 -15px; padding: 6px 15px 6px; }
 .search-nav>form { position: relative; }
 .nav1 a:hover { color: #0c73b4; text-decoration: none; }
 .nav1 ul { text-align: left; background-color: transparent; margin-top: 50px; }
 .nav1 ul li { display: block; border-bottom: 1px solid #999; }
 .nav1 ul li a { display: block; padding: 10px 0; }
 .nav1 ul li:hover>a { color: #0c73b4; }
 .nav1 ul li a>i { float: right; }
 .nav1 ul li ul { display: none; position: static; width: 100%; background-color: transparent; padding: 0 10px; }
 .nav1 ul li:hover>ul { display: none; }
 .nav1 ul li:hover>a>i { transform: rotateZ(0); }
 .nav1 ul li.open>a { background-color: transparent; }
 .nav1 ul li.open>a>i { transform: rotateZ(90deg); }
 .nav1 ul li.open>ul { display: block; }
 div#menuoverlay { display: block; visibility: hidden; position: fixed; left: 0; top: 0; width: 100%; height: 100%; transition: all ease-out 0.3s; z-index: 1; opacity: 0; }
 html.open-menu { overflow: hidden; }
 html.open-menu div#menuoverlay { visibility: visible; background: rgba(0, 0, 0, 0.5); min-height: 100vh; width: 100% !important; opacity: 1; width: calc(-150%); left: 250px; }
 html.open-menu a#hamburg { transform: translateX(250px); z-index: 999; }
 html.open-menu main { transform: translateX(250px); }
 html.open-menu nav.nav1 { z-index: 3; transform: translateX(0); }
 .menu-main-menu-container ul ul ul li a { padding: 5px; }
 ul li.has-subnav .accordion-btn { color: #000; font-size: 24px; width: 20px !important; float: right; line-height: inherit !important; }
 .nav1 ul li:last-child { border: 0; }
 .nav-cross.open>span {background: #ec0303;}
 
/*---------------------Hamberg Icon --------------------------------------------- */
 .nav-cross { width: 24px; height: 40px; position: relative; margin: 0px auto; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; }
 .nav-cross span {display: block;position: absolute;height: 3px;width: 100%;background: #ec0303;opacity: 1;left: 0;transform: rotate(0deg);transition: .25s ease-in-out;}
 #nav-icon1 span:nth-child(1) { top: 0px; }
 #nav-icon1 span:nth-child(2) { top: 18px; }
 #nav-icon1 span:nth-child(3) { top: 36px; }
 #nav-icon1.open span:nth-child(1) { top: 18px; transform: rotate(135deg); }
 #nav-icon1.open span:nth-child(2) { opacity: 0; left: -60px; }
 #nav-icon1.open span:nth-child(3) { top: 18px; transform: rotate(-135deg); }
 .nav-cross span:nth-child(1) { top: 12px; transform-origin: left center; }
 .nav-cross span:nth-child(2) { top: 20px; transform-origin: left center; }
 .nav-cross span:nth-child(3) { top: 28px; transform-origin: left center; }
 .nav-cross.open span:nth-child(1) { transform: rotate(45deg); top: 11px; left: 4px; }
 .nav-cross.open span:nth-child(2) { width: 0%; opacity: 0; }
 .nav-cross.open span:nth-child(3) { transform: rotate(-45deg); top: 28px; left: 4px; }


// --------------------------------------------------javascript----------------------------------------------//

// --------------------------------------------------Responsive Simple Navigation----------------------------------------------//
(function($) {
    $.fn.menumaker = function(options) {
        var cssmenu = $(this),
            settings = $.extend({
                title: "Menu",
                format: "dropdown",
                sticky: false
            }, options);
        return this.each(function() {
            cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
            $(this).find("#menu-button").on('click', function() {
                $(this).toggleClass('menu-opened');
                var mainmenu = $(this).next('ul');
                if (mainmenu.hasClass('open')) {
                    mainmenu.hide().removeClass('open');
                } else {
                    mainmenu.show().addClass('open');
                    if (settings.format === "dropdown") {
                        mainmenu.find('ul').show();
                    }
                }
            });
            cssmenu.find('li ul').parent().addClass('has-sub');
            multiTg = function() {
                cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
                cssmenu.find('.submenu-button').on('click', function() {
                    $(this).toggleClass('submenu-opened');
                    if ($(this).siblings('ul').hasClass('open')) {
                        $(this).siblings('ul').removeClass('open').hide();
                    } else { $(this).siblings('ul').addClass('open').show(); }
                });
            };
            if (settings.format === 'multitoggle') multiTg();
            else cssmenu.addClass('dropdown');
            if (settings.sticky === true) cssmenu.css('position', 'fixed');
            resizeFix = function() {
                if ($(window).width() > 991) {
                    cssmenu.find('ul').show();
                }
                if ($(window).width() <= 991) {
                    cssmenu.find('ul').hide().removeClass('open');
                }
            };
            resizeFix();
            return $(window).on('resize', resizeFix);
        });
    };
})(jQuery);
(function($) {
    $(document).ready(function() {
        $(".menu-header").menumaker({
            title: "Menu",
            format: "multitoggle"
        });
    });
})(jQuery);

// --------------------------------------------------Hemberg Push Navigation------------------------------------------------------------------------//
(function($) {
    jQuery(document).ready(function() {});
    $('a#hamburg').on('click', function(e) {
        $('html').toggleClass('open-menu');
        return false;
    });
    $('div#hamburg').on('click', function() {
        $('html').removeClass('open-menu');
    })
    $(document).ready(function() {
        $('.nav-cross').click(function() {
            $(this).toggleClass('open');
        });
    });
})(jQuery)