Site logo

Archived topic

Hook inside id="mobile-menu"

16 replies · Started by Jean-Charles on July 3, 2022

Viewing posts 1–15 of 17

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

Hi there,

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

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

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

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

Hi Ying,
Yes! exactly here :-)
Best

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!

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

I see.

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

Kindly let us know how it goes.

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

You’re welcome JC! Glad that worked! :)

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

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;
}

it works well thank you

You're welcome Jonathan!

This archived topic is closed to new replies.