Add HTML Block Above Elementor Responsive Mobile Menu

index.php

/**
 * Add HTML Block Above Elementor Responsive Mobile Menu
 * https://www.linkedin.com/posts/activity-7262031237320474624-lMHe
 *
 * This code snippet adds an HTML block above the Elementor mobile menu
 * by hooking into the 'wp_nav_menu' action. It checks if the menu slug 
 * matches 'mobile-menu' and inserts the HTML block with ID '4444' above 
 * the menu.
 * 
 * Usage:
 * - Add this code to your theme's 'functions.php' file or create a custom plugin.
 * - Adjust the HTML block ID and menu slug as needed to fit your setup.
 * 
 * Snippet by: Amirhp.Com <[email protected]>
 *
 * Disclaimer:
 * - Use this code at your own risk. The developer is not responsible 
 *   for any issues, errors, or malfunctions that may occur as a result 
 *   of using this code. Always test in a development environment first.
 */

add_action("wp_nav_menu", function($nav_menu, $args){
  // could use menu id too: $args->menu->term_id == 16
  if ($args->menu->slug == "mobile-menu") {
    $nav_menu = do_shortcode('[html_block id="4444"]') . $nav_menu;
  }
  return $nav_menu;
}, 10, 2);

This snippet lets you seamlessly add custom content, like your site logo or social icons, directly above the Elementor mobile menu without the need for an additional mega menu plugin. It checks the menu slug and inserts an HTML block, allowing for a simple and lightweight way to enhance your mobile menu layout.