1. Home
  2. FAQ
  3. Can a parent menu be clickable to open sub menu?

Can a parent menu be clickable to open sub menu?

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);
}
Was this article helpful to you? No 2 Yes 4

How can we help?