<!-- mobile menu --> <div class="mobilenav--wrap"> <div class="mobilenav"> <?php if(function_exists('wp_nav_menu')): wp_nav_menu( array( 'menu' =>'primary_nav', 'theme_location' => 'primary_nav', 'container'=>'', 'depth' => 2, 'menu_id' => 'menu' ) ); endif; ?> </div> </div>
//hide sub-menus jQuery('.mobilenav ul ul').hide(); jQuery('.mobilenav ul.sub-menu').each(function() { if(jQuery(this).children().length){ jQuery(this,'li:first').parent().append('<a class="menu-expand" href="#" style="font-size:26px;color:white;"><span class="plus1"></span><span class="plus2"></span></a>'); } }); jQuery('.mobilenav ul li.menu-item-has-children').on('click',function(e){ //jQuery('ul.sub-menu').slideUp(300, function(){}); //e.preventDefault(); if (jQuery(this).hasClass("menu-clicked")) { jQuery(this).removeClass("menu-clicked"); jQuery(this).children('ul').slideUp(300, function(){}); } else { jQuery(this).addClass("menu-clicked"); jQuery(this).children('ul').slideDown(300, function(){}); } })
/* mobile menu */ .mobilenav { width: 100%; height: 100%; overflow: scroll; padding: 0; } .mobilenav > ul { width: 100%; box-sizing: border-box; padding-inline-start:0; } .mobilenav ul li { position: relative; list-style:none; font-size: 22px; } .mobilenav ul li a { display: block; padding: 15px 0px; text-decoration: none; color: color(3); } .mobilenav ul li a:hover { color: color(1); transition:all .6s ease; } .mobilenav ul li:hover ul { display:block; } .mobilenav ul ul li { border-bottom: 0; position: relative; font-size: 80%; padding:0!important; } .mobilenav ul ul { padding-left: 20px; background:none; padding:0 0 0 20px!important; } .mobilenav ul ul li a { padding: 5px 0 5px 20px; } a.menu-expand { padding: 0 !important; background: transparent !important; width: 44px; height: 44px; position: absolute; top: 7px; right: 0; z-index: 100; } .mobilenav ul li.menu-item-has-children .plus1{ content: ''; position: absolute; right: 10px; top: 24px; width: 20px; height: 2px; display: block; background: color(1); transition: all 0.3s ease-in-out; transform: rotate(-180deg); } .mobilenav ul li.menu-item-has-children .plus2{ content: ''; position: absolute; right: 10px; top: 24px; width: 20px; height: 2px; display: block; background: color(1); transition: all 0.3s ease-in-out; transform: rotate(-270deg); } .menu-clicked .plus2 { transform: rotate(0)!important; }