Zakra (Free)
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):
|
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 |
<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:
|
1 2 3 |
<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”.