Skip to content

Instantly share code, notes, and snippets.

@SchneiderSam
Forked from diggeddy/gp-mega-menu.php
Last active May 7, 2025 01:26
Show Gist options
  • Save SchneiderSam/8549b6bf0a5c90222f3e9804bdfc3d79 to your computer and use it in GitHub Desktop.
Save SchneiderSam/8549b6bf0a5c90222f3e9804bdfc3d79 to your computer and use it in GitHub Desktop.
Create a sub menu item container with action hook (Mega Menu with GeneratePress and GenerateBlocks)
<?php
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_mega_item';
$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_mega_menu-{menu-item-name}
$custom_hook_name = $class_string . '_' . $menu_item_slug;
// Add our common and specific hooks
ob_start();
?>
<ul class="sub-menu custom-sub-menu">
<li>
<?php do_action('gp_before_mega_item'); ?>
<?php do_action($custom_hook_name); ?>
<?php do_action('gp_after_mega_item'); ?>
</li>
</ul>
<?php
$custom_sub_menu_html = ob_get_clean();
// return the output after the menu items anchor
$item_output .= $custom_sub_menu_html;
return $item_output;
}
@alin-teodosiu
Copy link

Addendum to the css I initially posted above for mouse hover over activates menu:
If you select in generate press the option for the nav menu to activate on mouse hover and your add any value to ”top”, the menu will instantly disappear when trying to move over it.

You can remove top or if you still want some space between the dropdown and the menu (as in the picture above), add instead ”padding-top” and it work that way.

@DavidKeevis
Copy link

Hi Alin - Working on a newer implementation and noted your comment about the hover event. You can add a value to the top property. However, this value cannot be greater than the value set in the Menu Item Height property of the navigation element you're working with - typically Primary Nav. The key factor is the mouse pointer focus must transition from the menu item to the submenu item without a gap. Thanks for your additional CSS - I'm tweaking on some things that are proving to be really nice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment