[Support request] Hook inside id=”mobile-menu”

[Jean-Charles]

Hi,
I try to add an element with hook inside mobile menu.
But I try all the hooks but the element doesn’t go in the right navigation.
My mobile menu is like this :

<nav id="mobile-header">
...
 <div id="mobile-menu">
...
</div>
</nav>

And all the mobile hook are inside
<nav id="mobile-menu-control-wrapper">
But this nav is hidden in mobile…

You could search in DOM “Mobile elements” here https://colisee.incognito.digital/

Any idea ?
Best

[David]

Hi there,

did you resolve this ? As i see the mobile-menu-langue element in there

[Jean-Charles]

Nope I didn’t resolve it.
I saw that my mobile menu is inside
<nav id="mobile-header">
And the mobile hook appear un <header>
I think that my mobile menu isn’t in the right place, but i don’t know why.
Best.
JC

[Jean-Charles]

I find where this menu is generate :
line 1051 in gp-premium/menu-plus/functions/generate-menu-plus.php file
Best
JC

[Ying]

Hi there,

Can you tell me where you want your element to show up exactly visually on mobile?

I marked it in the blow screenshot, can you check if that’s the position you want your element to be?
https://www.screencast.com/t/RzgUeWKouI

[Jean-Charles]

Hi Ying,
Yes! exactly here 🙂
Best

[Fernando]

Hi Jean-Charles,

I see. There’s no hook in that specific location. You would need to add a snippet to add a custom Hook there:

add_shortcode('portable_hook', function($atts){
	ob_start();
        $atts = shortcode_atts( array(
            'hook_name' => 'no foo'
        ), $atts, 'portable_hook' );
		do_action($atts['hook_name']);
	return ob_get_clean();
});

add_filter( 'wp_nav_menu_items', 'prefix_add_div', 15, 2 );
function prefix_add_div( $items, $args ) {
	if( $args->theme_location != 'primary' ) {
        return $items;
    }
    $items .= '<li class="menu-item custom-menu-item">'.do_shortcode( '[portable_hook hook_name="generate_custom_primary_menu"]' ).'</li>';
    return $items;
}

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

With this, you’ll have a new custom Hook called generate_custom_primary_menu. You can use it as such: https://share.getcloudapp.com/9ZuoD7j9

You’ll then need to add this custom CSS to hide the new menu item in other view.

@media (min-width: 769px) {
	.custom-menu-item {
		display: none;
	}
}

Hope this helps!

[Jean-Charles]

Thx a lot, it’s nearly work 🙂
But my elements appear in all my menu ( primary, language, footer etc.)
https://tinyurl.com/2bdubjll

Best.
JC

[Fernando]

I see.

I modified the PHP snippet above. Can you try that instead?

Kindly let us know how it goes.

[Jean-Charles]

Nice,
You are the best,
Thx to all the teams 🙂
Best
JC

[Fernando]

You’re welcome JC! Glad that worked! 🙂

[Jonathan]

Hi,
what need to be changed in the php code above to have this hook at the beginning of the mobile menu instead of the last item?

Thanks

[Fernando]

Try this:

add_shortcode('portable_hook', function($atts){
	ob_start();
        $atts = shortcode_atts( array(
            'hook_name' => 'no foo'
        ), $atts, 'portable_hook' );
		do_action($atts['hook_name']);
	return ob_get_clean();
});

add_filter( 'wp_nav_menu_items', 'prefix_add_div', 15, 2 );
function prefix_add_div( $items, $args ) {
	if( $args->theme_location != 'primary' ) {
        return $items;
    }
    $items = '<li class="menu-item custom-menu-item">'.do_shortcode( '[portable_hook hook_name="generate_custom_primary_menu"]' ).'</li>'. $items;
    return $items;
}

[Jonathan]

it works well thank you

[Fernando]

You’re welcome Jonathan!

[Author]

Posts