Create a Mega Menu with GeneratePress & Blocks

Mega Menus are a fantastic way to organize complex navigation structures on your website. With GeneratePress and GenerateBlocks, you can create a fully customizable Mega Menu without relying on third-party plugins. In this guide, we’ll explore how to create a Mega Menu using GeneratePress hooks and blocks step by step.

Why Use GeneratePress for Mega Menus?

GeneratePress is a lightweight, performance-focused WordPress theme that offers exceptional flexibility. As a lifetime premium member, I’ve had the opportunity to dive deep into its features. With GenerateBlocks and the power of GeneratePress Elements, you can create professional-looking Mega Menus tailored to your needs.

Step 1: add a CSS class to a menu item in WordPress

Follow these steps to add a CSS class to a menu item in WordPress. If the option to add CSS classes isn’t visible, there’s an easy way to enable it.

Access the Menu Section

1. Log in to your WordPress Admin Dashboard.
2. Navigate to Appearance > Menus.

Enable CSS Classes Option

If you don’t see the CSS Classes field when editing menu items:

1. Look for the “Screen Options” tab at the top-right corner of the page.
2. Click on the “Screen Options” tab to expand it.
3. Check the box next to CSS Classes under “Show advanced menu properties.”
4. Close the “Screen Options” tab.

Step 2: Add PHP Functionality

The first step is to dynamically integrate the Mega Menu functionality by adding a custom PHP filter to your theme or child theme’s functions.php file.

Code 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_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;
    $custom_hook_name = $class_string . '_' . $menu_item_slug;

    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();
    $item_output .= $custom_sub_menu_html;

    return $item_output;
}

This function targets specific menu items based on a class and dynamically adds hooks for further customization.

Step 3: Style the Mega Menu with CSS

To ensure your Mega Menu is visually appealing, add the following CSS to your theme:

Code Snippet:

gp_mega_item {
    position: static !important;
}

.main-navigation .gp_mega_item .sub-menu.custom-sub-menu {
    width: 100vw;
    left: 0;
    right: 0;
}

.inside-navigation {
    position: static;
}

This CSS adjusts the width and positioning of the Mega Menu to ensure it spans the full width of the viewport.

Step 4: Create a Custom Block Hook in GeneratePress Elements

GeneratePress Elements allow you to add dynamic content to your website easily. For the Mega Menu, we’ll use a Block Hook.

1. Go to Appearance > Elements in your WordPress dashboard.
2. Click Add New and select Block as the type.
3. Inside the editor, create the content you want to display in your Mega Menu.
4. Assign a hook name that matches the $custom_hook_name from the PHP function (e.g., gp_mega_item_products).
5. Set display rules to target specific locations, such as your primary menu.
6. Publish the Element.

Final Thoughts

With these three steps, you can create a powerful and customizable Mega Menu using GeneratePress and GenerateBlocks. This method eliminates the need for additional plugins, ensuring your site remains lightweight and fast.

Stay tuned for a video tutorial where I’ll demonstrate the entire process. If you have any questions or need further assistance, feel free to comment below. Happy coding! 💻