Mobile/Desktop Menu and nested Menus

[DLX23]

Hi,

i have the following Menu:

Link1
Link2
- LinkA
- LinkB
- LinkC
- - LINKC1
- - LINKC2
- LinkD
Link3
Link4

i have the follow css:

.dropdown:hover>.dropdown-menu {
  display: block;
}

if click on Link2 then it go to that url, but on hover submenu expand. This works on Desktop.
But on mobile i want first click on Link2 submenu expand and second click on Link2 go to the url.
and how can i show deph 3 (LINKC1,LINKC2) in mobile? In Desktop LinkC shows no Arrow
what can i do?

[pattonwebz]

The walker in this theme doesn't have support for 3 levels of depth on the items (disclosure, I maintain that walker). If you look at the repo for the walker there are some issues that outline how you can make that happen.

It isn't something bootstrap itself supports directly either so it will need extra CSS and potentially additional JS to handle correctly

[currentcreative]

The repo I find on your account is this one. I don't see any notes about how to make a 3rd level dropdown happen there. It's in the Readme?

[IanDelMar]

@currentcreative Yes, it''s this repo. There is no "official" information on how to do it. But some people came up with solutions in issues. you can e.g. search the issues for "level" or something like that.

[currentcreative]

ohhhh in issues! Got it, thanks! [edit: link deleted to bad blogpost code]

[IanDelMar]

@currentcreative I don't think that this is going to work for any nav menu that collapses. You will need to use JS.

[currentcreative]

You're right, that was really incomplete. Deleting it now.

[DLX23]

But why? Gesendet von Outlook für Android<https://aka.ms/AAb9ysg>

…

________________________________ From: IanDelMar ***@***.***> Sent: Wednesday, March 1, 2023 9:20:31 PM To: understrap/understrap ***@***.***> Cc: Benjamin Noack ***@***.***>; Author ***@***.***> Subject: Re: [understrap/understrap] Mobile/Desktop Menu and nested Menus (Discussion #1646) @currentcreative<https://github.com/currentcreative> I don't think that this is going to work for any nav menu that collapses. You will need to use JS. — Reply to this email directly, view it on GitHub<#1646 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AE5EBXYGJHGXLKWOSUYZKPDWZ6VQ7ANCNFSM5P27ARDA>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[IanDelMar]

Because of Bootstrap...

[DLX23]

@IanDelMar it is possible on mobile to click on the dropdown main item and have an arrow beside that who i can expand the 2nd level?
actually on mobile i click on the main item and it expand, so i can't use a link to the main item for e.g. overview or something like that.
is there a way?

[DLX23]

that was my try, and it works, i thank you so much. i just see now you answered with code update. i will optimize it, thank you!

function append_split_button_toggle( $item_output, $item, $depth, $args ) {
	if ( ! isset( $args->walker ) || ! is_a( $args->walker, '\Understrap_WP_Bootstrap_Navwalker' ) ) {
		return $item_output;
	}

	if ( 1 === (int) $args->depth ) {
		return $item_output;
	}

	//check if "children" exists
	if($args->walker->has_children) {
		return $item_output . get_split_button_toggle();
	} else {
		return $item_output;
	}
	
}

function get_split_button_toggle() {
	$classes = 'd-inline dropdown-toggle dropdown-toggle-split nav-link ps-5 ps-md-0';
	$sr_text = __( 'Toggle Dropdown', 'domain' );

	return sprintf(
		'<a href="#" %s data-bs-toggle="dropdown" aria-expanded="false" role="button">%s</a>',
		'class="' . esc_attr( $classes ). '"',
		'<span class="visually-hidden">' . esc_html( $sr_text ) . '</span>'
	);
}

add_filter( 'nav_menu_link_attributes', 'remove_single_button_dropdown_toggle', 10, 4 );

function remove_single_button_dropdown_toggle( $atts, $item, $args, $depth ) {
	if ( ! isset( $args->walker ) || ! is_a( $args->walker, '\Understrap_WP_Bootstrap_Navwalker' ) ) {
		return $atts;
	}

	if ( ! isset( $atts['class'] ) || false === strpos( $atts['class'], 'dropdown-toggle' ) ) {
		return $atts;
	}


	//change link from # to item url in parent item
	if ( isset( $atts['data-bs-toggle'] ) || true === strpos( $atts['data-bs-toggle'], 'dropdown' ) ) {
		$atts["href"] = $item->url;
		
	}

	$atts['class'] = str_replace( 'dropdown-toggle', '', $atts['class'] );

	if ( isset( $atts['class'] ) || true === strpos( $atts['class'], 'data-bs-toggle' ) ) {
		$atts["class"] = $atts["class"] . " d-inline ";
	}
	
	$atts["data-toggle"] = str_replace( 'dropdown', '', $atts['data-toggle'] );
	$atts["data-bs-toggle"] = str_replace( 'dropdown', '', $atts['data-bs-toggle'] );
	return $atts;
}

[IanDelMar]

For Bootstrap 5 you just need data-bs-toggle.

- $atts["data-toggle"] = str_replace( 'dropdown', '', $atts['data-toggle'] );
+ if ( isset( $atts["data-toggle"] ) ) {
+ 	unset( $atts["data-toggle"] );
+ }

Can you please fix the "`"s in your answer? It would make the code much more readable. Thank you.

[DLX23]

i really don't know why it gets unformated. i do a "" at start and at the end.
Your code is much cleaner! i just add:

//change link from # to item url in parent item
		if ( isset( $atts['data-bs-toggle'] ) || true === strpos( $atts['data-bs-toggle'], 'dropdown' ) ) {
			$atts["href"] = $item->url;
			
}

[IanDelMar]

I think this is the final version:

add_filter( 'walker_nav_menu_start_el', 'slug_append_split_button_toggle', 10, 4 );

function slug_append_split_button_toggle( $item_output, $item, $depth, $args ) {
	if ( ! property_exists( $args, 'walker' ) || ! is_a( $args->walker, '\Understrap_WP_Bootstrap_Navwalker' ) ) {
		return $item_output;
	}

	if ( 1 === (int) $args->depth || false === $args->walker->has_children) {
		return $item_output;
	}

	return $item_output . slug_get_split_button_toggle();
}

function slug_get_split_button_toggle() {
	$classes = 'dropdown-toggle dropdown-toggle-split nav-link d-inline ps-5 ps-md-0';
	$sr_text = __( 'Toggle Dropdown', 'domain' );

	return sprintf(
		'<a href="#" %s data-bs-toggle="dropdown" aria-expanded="false" role="button">%s</a>',
		'class="' . $classes . '"',
		'<span class="visually-hidden">' . esc_html( $sr_text ) . '</span>'
	);
}

add_filter( 'nav_menu_link_attributes', 'slug_remove_single_button_dropdown_toggle', 10, 4 );

function slug_remove_single_button_dropdown_toggle( $atts, $item, $args, $depth ) {

	if ( ! property_exists( $args, 'walker' ) || ! is_a( $args->walker, '\Understrap_WP_Bootstrap_Navwalker' ) ) {
		return $atts;
	}
	if ( ! isset( $atts['class'] ) ) {
		// Should not be the case...
		return $atts;
	}

	if ( false !== strpos( $atts['class'], 'nav-link' ) ) {
		$atts['class'] .= ' d-inline-block';
	}

	if ( false === strpos( $atts['class'], 'dropdown-toggle' ) ) {
		return $atts;
	}

	// Change link from # to item url in parent item and remove toggle attribute.
	if ( isset( $atts['data-bs-toggle'] ) ) {
		$atts['href'] = $item->url;
		unset( $atts['data-bs-toggle'] );
	}

	if ( isset( $atts['data-toggle'] ) ) {
		unset( $atts['data-toggle'] );
	}

	$atts['class'] = str_replace( 'dropdown-toggle', '', $atts['class'] );
	return $atts;
}

For code formatting you have to use ``` (3 backticks) at the start and at the end of code. ```php at the start and ``` at the end gives PHP syntax highlighting. A single backtick works for inline code like some code only.

[DLX23]

Thank you for formatting info. I fixed it in my comments.
Your code work like a charm. Thank You! <3 I think that will help a lot of people!
I will put it in a plugin, so I can flexibly turn it on and off