Sidebar / Widget Area above & below the responsive menu

Hi,

I’ve been playing around to get a sidebar going for widgets above and below the responsive menu.

Here’s the code to put in your theme’s functions.php file (or better: use the Code Snippets plugin):

// Adds a widget area above menu
if (function_exists('register_sidebar')) {
 register_sidebar(array(
 'name' => 'Widget area above the menu',
 'id' => 'sidebar-above-menu',
 'description' => 'Widget area above the menu, below the logo',
 'before_widget' => '<div class="widget sidebar-above-menu">',
 'after_widget' => '</div>',
 'before_title' => '<h2>',
 'after_title' => '</h2>'
 ));
}

// Place the widget area above the menu
add_action ('pre_wp_nav_menu', 'add_my_widget_area', 0);
function add_my_widget_area() {
 if (function_exists('dynamic_sidebar')) {
 dynamic_sidebar('sidebar-above-menu');
 }
}

// Adds a widget area below menu
if (function_exists('register_sidebar')) {
 register_sidebar(array(
 'name' => 'Widget area below the menu',
 'id' => 'sidebar-below-menu',
 'description' => 'Widget area below the menu',
 'before_widget' => '<div class="widget sidebar-below-menu">',
 'after_widget' => '</div>',
 'before_title' => '<h2>',
 'after_title' => '</h2>'
 ));
}

function ss_new_nav_menu_items($items){
	$sidebar='';
	if (function_exists('dynamic_sidebar')) {
		ob_start();
		dynamic_sidebar('sidebar-below-menu');
		$sidebar = ob_get_contents();
		ob_end_clean();
	 }
    return $items . $sidebar;
}
add_filter( 'wp_nav_menu', 'ss_new_nav_menu_items' );

This code adds those areas for all menus on the site that use wp_nav_menu(). If you want it to work only for the responsive menu, you must tweak the code a bit.

The easy idea would be to wrap your main menu (not the responsive one) with a CSS class (main-menu-wrapper in the example below) and do the following in your style.css:

.main-menu-wrapper .sidebar-below-menu, .main-menu-wrapper .sidebar-above-menu {
    display:none;
}

Should work. Hope it helps someone 🙂
The creator of this great plugin might want to implement this one day.

Chris Trynkiewicz from EssentialsOfTheOnlineBusiness.com

https://wordpress.org/plugins/responsive-menu/