Max Mega Menu Documentation

This guide is for the Zakra theme hosted on wordpress.org.

Fix Mobile Menu

Step 1

Copy the template-parts/header/primary-menu/mobile-toggle.php file to your child theme.

Find (line 47):

	<nav id="zak-mobile-nav" class="<?php zakra_css_class( 'zakra_mobile_nav_class' ); ?>"

		<?php echo wp_kses_post( apply_filters( 'zakra_nav_data_attrs', '' ) ); ?>>

		<div class="zak-mobile-nav__header">
			<?php if ( get_theme_mod( 'zakra_enable_header_search', true ) ) : ?>
				<?php get_search_form(); // Header search. ?>
			<?php endif; ?>

			<!-- Mobile nav close icon. -->
			<button id="zak-mobile-nav-close" class="zak-mobile-nav-close" aria-label="<?php esc_attr_e( 'Close Button', 'zakra' ); ?>">
				<?php zakra_get_icon( 'x-mark' ); ?>
			</button>
		</div> <!-- /.zak-mobile-nav__header -->

		<?php
		wp_nav_menu(
			array(
				'theme_location' => apply_filters( 'zakra_mobile_menu_location', 'menu-primary' ),
				'menu_id'        => 'zak-mobile-menu',
				'menu_class'     => 'zak-mobile-menu',
				'container'      => '',

				'fallback_cb'    => function() {
					require get_template_directory() . '/inc/class-zakra-walker-page.php';
					$output = '<ul id="zak-mobile-menu" class="zak-mobile-menu">';

					$output .= wp_list_pages(
						array(
							'echo'               => false,
							'title_li'           => false,
							'walker'             => new Zakra_Walker_Page(),
							'has_children_class' => 'menu-item-has-children',
							'current_class'      => 'current-menu-item',
						)
					);

					$output .= '</ul>';

					// @codingStandardsIgnoreStart
					echo $output;
				},

			)
		);
		?>

Replace with:

	<nav>

		<?php wp_nav_menu( array( 'theme_location' => 'menu-primary' ) ); ?>

Step 2

Under Appearance > Menus > Max Mega Menu Settings, set the Effect (Mobile) to “Off Canvas – Slide from right”.