How to Limit the Depth of Nav Menu in Bricks

Updated on 31 Oct 2023

This Pro tutorial provides the steps for limiting the depth of WordPress navigation menu rendered via Bricks‘ Nav Menu element.

Ex.: Limiting the depth to 2 of a specific menu (by its ID):

Before:

After:

Step 1

Add the following in child theme‘s functions.php or a code snippets plugin:

add_filter( 'wp_nav_menu_args', function ( $args ) {
	if ( $args['menu'] === 27 ) {
		$args['depth'] = 2;
	}
	
	return $args;
} );

Replace 27 with the ID of your menu.

Here’s how you can get the menu ID:

Step 2

In Bricks editor, select the Nav Menu element and add this in its Custom CSS:

%root% ul.sub-menu .brx-submenu-toggle.icon-right button {
	display: none;
}

Update:

Sometimes you may have multiple instances of the same menu on a given page. It is possible to apply the filter to a specific instance by the element ID.

Ex:

add_action( 'bricks/element/settings' , function ( $settings, $element ) {
	if ( $element->id !== 'xhqyjo' ) {
	  remove_filter( 'wp_nav_menu_args', 'bl_change_nav_menu_args' );
	} else {
	  add_filter( 'wp_nav_menu_args', 'bl_change_nav_menu_args' );
	}
  
	return $settings;
  }, 10, 2 );

function bl_change_nav_menu_args( $args ) {
	if ( $args['menu'] === 27 ) {
		$args['depth'] = 2;
	}
	
	return $args;
}

Reference

https://developer.wordpress.org/reference/hooks/wp_nav_menu_args/