Archived topic
Hook inside id="mobile-menu"
16 replies · Started by Jean-Charles on July 3, 2022
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!