Mobile Navigation

Hey!

I don’t think it’s possible to do this in a child theme yet but we may get this added in a future update.

For now you can do this by opening up /enfold/js/avia.js and changing line 324 from this.

var menu 			  	= header.find('.main_menu ul:eq(0)'),

To this.

var menu 			  	= header.find('.main_menu ul:eq(0)');
if ( header.find('.main_menu_responsive ul:eq(0)').length != 0 ) { menu = header.find('.main_menu_responsive ul:eq(0)'); }
var	first_level_items 	= menu.find('>li').length,

And then add this to the bottom of your functions.php file.

avia_nav_menus();
function avia_nav_menus()
{
	// Override the default avia_nav_menu function to add our responsive menu
	
	global $avia_config, $wp_customize;

	$avia_config['nav_menus'] = array(	'avia' => array('html' => __('Main Menu', 'avia_framework')),
									'avia2' => array(
												'html' => __('Secondary Menu <br/><small>(Will be displayed if you selected a header layout that supports a submenu <a target="_blank" href="'.admin_url('?page=avia#goto_header').'">here</a>)</small>', 'avia_framework'),
												'plain'=> __('Secondary Menu - will be displayed if you selected a header layout that supports a submenu', 'avia_framework')),
									'avia3' => array(
												'html' => __('Footer Menu <br/><small>(no dropdowns)</small>', 'avia_framework'),
												'plain'=> __('Footer Menu (no dropdowns)', 'avia_framework')),
									'avia_responsive' => array(
												'html' => __('Responsive Menu <br /><small>(If set will replace your main menu on mobiles)</small>'))
								);
	
	add_theme_support('nav_menus');
	
	foreach($avia_config['nav_menus'] as $key => $value)
	{
		//wp-admin\customize.php does not support html code in the menu description - thus we need to strip it
		$name = (!empty($value['plain']) && !empty($wp_customize)) ? $value['plain'] : $value['html'];
		register_nav_menu($key, THEMENAME.' '.$name);
	}
}
add_action( 'ava_after_main_menu', 'enfold_customization_add_responsive_menu' );
function enfold_customization_add_responsive_menu() {

	// Display an extra menu for responsive to be picked up via javascript
	echo "<nav style = 'display:none;' class='main_menu_responsive' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
		$avia_theme_location = 'avia_responsive';
		$avia_menu_class = $avia_theme_location . '-menu';
		$args = array(
			'theme_location'	=> $avia_theme_location,
			'menu_id' 			=> $avia_menu_class,
			'menu_class'		=> 'menu av-main-nav',
			'container_class'	=> $avia_menu_class.' av-main-nav-wrap'.$icon_beside,
			'fallback_cb' 		=> false,
			'walker' 			=> new avia_responsive_mega_menu()
		);

	wp_nav_menu($args); 
		
	echo '</nav>';
}

You should see a new menu area called “Enfold Responsive Menu” which when set will replace the responsive menu with a different one.

Regards,
Elliott

• This reply was modified 9 years, 11 months ago by Elliott.