Many Genesis Framework users opt to use the Custom Menu Widget in the Header Right Widget Area instead of the standard primary and/or secondary menu locations built into your theme if they are supported at all. The problem you will encounter with the Custom Menu Widget is that it does not generate a mobile responsive menu. This can be a big problem, especially with the vast numbers of mobile users accessing our sites. In fact, I've seen numerous questions in forums asking how to make the Custom Menu Widget mobile responsive. The questions I've reviewed have remained unanswered.
This tutorial is a direct result of a requirement for one of my clients, Blue Olive Strategic Solutions. I recently built a new child theme for one of Blue Olive's customers, American RX. The design required me to place the primary navigation menu in the Custom Menu Widget in the Header Right area. Blue Olive asked for a typical mobile responsive hamburger menu when viewed on small mobile screens. It took a while, but I solved the problem. This tutorial will teach you how to make the custom menu widget mobile responsive. It may not solve your problem completely, but it will certainly get you on the right track.
The crux of the problem lies in the fact that Genesis responsive menus require that the menu be assigned to the primary and/or secondary theme locations. When the markup is created, the HTML wrappers have the class of nav-primary or nav-secondary. It's relatively easy to hook into the primary or secondary navigation areas. But when the menu is generated in the Custom Menu Widget, it has a class called nav-header. There aren't any built-in hooks for the nav-header class, at least none that I can find.
Before we get into the code, there are a few things that need explanation. First, I use the Dynamik Website Builder from CobaltApps to build my child themes. The Dynamik Website Builder generates its own code to create mobile responsive menus. I generally choose a vertical toggle style menu. When using the primary and secondary menu locations, the generated code, inserts a section of div tags before the nav-primary and nav-secondary elements. These div tags are what drives the menu toggle.
Second, I am not providing the code generated by Dynamik Website Builder. There are dozens of examples and plenty of source code available for mobile responsive menus. You've probably already gotten your own favorite code that you use with your sites. This tutorial will point you in the right direction for integrating your own code so the Custom Menu Widget is mobile responsive.
Third, I am assuming that you do not have a menu assigned to your theme's primary location.
With those points out of the way, here's the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | add_action( 'genesis_before_header', 'vmf_custom_responsive_menu' ); function vmf_custom_responsive_menu() { remove_action( 'genesis_header', 'genesis_do_header' ); add_action( 'genesis_header', 'vmf_genesis_do_responsive_header' ); } function vmf_genesis_do_responsive_header() { global $wp_registered_sidebars; genesis_markup( array( 'html5' => '<div %s>', 'xhtml' => '<div id="title-area">', 'context' => 'title-area', ) ); do_action( 'genesis_site_title' ); do_action( 'genesis_site_description' ); echo '</div>'; if ( ( isset( $wp_registered_sidebars['header-right'] ) && is_active_sidebar( 'header-right' ) ) || has_action( 'genesis_header_right' ) ) { genesis_markup( array( 'html5' => '<aside %s>', 'xhtml' => '<div class="widget-area header-widget-area">', 'context' => 'header-widget-area', ) ); do_action( 'genesis_header_right' ); add_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' ); add_filter( 'wp_nav_menu', 'vmf_genesis_header_menu_wrap' ); dynamic_sidebar( 'header-right' ); remove_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' ); remove_filter( 'wp_nav_menu', 'vmf_genesis_header_menu_wrap' ); genesis_markup( array( 'html5' => '</aside>', 'xhtml' => '</div>', ) ); } } function vmf_genesis_header_menu_wrap( $menu ) { if ( ! genesis_html5() ) return $menu; $responsive = '<div class="responsive-primary-menu-container">'; $responsive .= ' <div class="responsive-menu-icon">'; $responsive .= ' <span class="responsive-icon-bar"></span>'; $responsive .= ' <span class="responsive-icon-bar"></span>'; $responsive .= ' <span class="responsive-icon-bar"></span>'; $responsive .= ' </div>'; $responsive .= ' <h3 class="mobile-primary-toggle">Navigation</h3>'; $responsive .= '</div>'; return $responsive . sprintf( '<nav %s>', genesis_attr( 'nav-primary' ) ) . $menu . '</nav>'; } |
What we're doing here is to replace the genesis_do_header function with our own custom header function. This function is essentially the core genesis_do_header function with some slight modifications. What makes this code work for my theme is the last function, vmf_genesis_header_menu_wrap. The native genesis_header_menu_wrap function does one thing, it creates the HTML markup for any menu assigned to the Custom Menu Widget in the Header Right Area. The following is the code for the native genesis_header_menu_wrap function.
1 2 3 4 5 6 7 8 | function genesis_header_menu_wrap( $menu ) { if ( ! genesis_html5() ) return $menu; return sprintf( '<nav %s>', genesis_attr( 'nav-header' ) ) . $menu . '</nav>'; } |
This is where the nav-header markup is created. In the customized code, I added some additional markup required by the Dynamik Website Builder code and also changed the menu markup from nav-header to nav-primary. This works great on the client's site. I hope it helps you move in the right direction with your theme.
Thank you! I been looking for this! I hope it actually is exactly what I been looking for. I got a navigation in my header widget are on the right and just can’t seem to get the responsive menu to show correctly without the header nav dropping down on the actual content area of the page and the messing up the whole design of the site.