Hook area in default mobile menu?

Hi there,

there are some ways to do it.
But first, is it a “real” button or would making a menu item look like a button suffice ?

So you could do this:

1. use the generate_after_primary_menu hook.
This comes immediately after the main menu.

2. insert a container block ( or div ) with a CSS Class of: after-mobile-menu
2.1 add your button or whatever inside that.

3. Add this CSS:

.after-mobile-menu {
    order: 5;
    display: none;
}
nav.toggled .after-mobile-menu {
    display: block;
}

Which will display it only when the mobile menu is open.

It is extremely difficult for us to help without seeing the issue.

Is it possible to move the site online and share the site link with us?

OK, so the issue is two fold, first the Sticky Navigation will absolute position the mobile menu, and to compound that you have the menu set to cover 100vh.

Instead you will need to hook the button inside the menu

1. Add this PHP Snippet:

add_filter( 'walker_nav_menu_start_el', 'db_sub_menu_item_hook', 10, 4 );
function db_sub_menu_item_hook( $item_output, $item, $depth, $args ) {

    // Specify menu item class to target
    $class_string = 'gp_menu_hook';
    $menu_item_classes = $item->classes;
	
    if ( empty( $menu_item_classes ) || !in_array( $class_string , $menu_item_classes ) ) {
        return $item_output;
    }
    $menu_item_slug =  $item->post_name;
    // create custom hook from $class_string and $menu_item_slug
    // example result gp_menu_hook-{menu-item-name}
    $custom_hook_name = $class_string . '-' . $menu_item_slug;
    
    // Add our common and specific hooks
    ob_start(); 
    ?>
    <div class="custom-menu-hook <?php echo $custom_hook_name; ?>">
	<?php do_action('gp_before_menu_hook'); ?>
	<?php do_action($custom_hook_name); ?>
	<?php do_action('gp_after_menu_hook'); ?>
    </div>
    <?php
    $custom_html = ob_get_clean();
    // return the output after the menu items anchor
    $item_output = $custom_html;

    return $item_output;
}

2. in Appearance > Menus add a Custom Link with a relevant label eg. button
Give the menu item a CSS Class of: gp_menu_hook

This will create a custom hook inside that menu item. The hook name syntax will be: gp_menu_hook-{menu-item-name}

So for the example it would be: gp_menu_hook-button

3. In the Element you can set the Hook to Custom Hook, and paste in your hook name.

Glad to be of help

Glad to be of help 🙂 !!