By default on mobile, the users need to click to the arrow icon to open the sub-menu.
In some cases, if you want to the parent menu open the sub-menu on the mobile. You need to add the custom the code below to the child theme.
In woostify-child/functions.php. Add the code below:
add_action( 'wp_enqueue_scripts', 'your_custom_function_name' );
/**
* Your function name
*/
function your_custom_function_name() {
// Enqueue menu script from child-theme.
if ( defined( 'WOOSTIFY_VERSION' ) ) {
wp_enqueue_script(
'woostify-navigation',
get_stylesheet_directory_uri() . '/js/navigation.js',
array( 'jquery' ),
woostify_version(),
true
);
}
}
In child theme, cread a folder js then add a file navigation.js. Copy and paste the code below:
/**
* Navigation.js
*
* @package woostify-child
*/
'use strict';
// Open Menu mobile.
function nav() {
var menuToggleBtn = document.getElementsByClassName( 'toggle-sidebar-menu-btn' );
if ( ! menuToggleBtn.length ) {
return;
}
for ( var i = 0, j = menuToggleBtn.length; i < j; i++ ) {
menuToggleBtn[i].addEventListener(
'click',
function() {
document.documentElement.classList.add( 'sidebar-menu-open' );
closeAll();
}
);
}
}
// Accordion menu on sidebar.
function sidebarMenu( node ) {
var selector = ( arguments.length > 0 && undefined !== arguments[0] ) ? jQuery( node ) : jQuery( '.sidebar-menu .primary-navigation' ),
itemMenu = selector.find( '.menu-item-has-children > a' );
itemMenu.each(
function( i, ele ) {
jQuery( ele ).on(
'click',
function( e ) {
e.preventDefault();
var t = jQuery( this ),
nextSibling = t.siblings( 'ul' ),
allSubMenu = t.parent().parent().find( 'li .sub-menu' ),
allItemMenu = t.parent().parent().find( '.menu-item-has-children > a' );
if ( t.hasClass( 'active' ) ) {
t.removeClass( 'active' );
} else {
allItemMenu.removeClass( 'active' );
t.addClass( 'active' );
}
// Hide sub-menu.
if ( nextSibling.hasClass( 'show' ) ) {
nextSibling.slideUp(
200,
function() {
jQuery( this ).removeClass( 'show' );
}
);
} else {
// Show sub-menu.
allSubMenu.slideUp(
200,
function() {
jQuery( this ).removeClass( 'show' );
}
);
nextSibling.slideToggle(
200,
function() {
jQuery( this ).toggleClass( 'show' );
}
);
}
}
);
}
);
}
document.addEventListener(
'DOMContentLoaded',
function() {
nav();
sidebarMenu();
}
);
In child theme, add the code below to style.css
.sidebar-menu .active .arrow-icon {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}