You may need to use Manual Integration to replace the Kallyas menu to prevent the theme from interfering with UberMenu on mobile.
Current Solution
Current versions of Kallyas have changed the header significantly. The menu function is now pluggable, so to manually integrate you can add this PHP in the functions.php
of your child theme:
function zn_header_main_menu( $mm_style = 'active-bg' ){ if( function_exists( 'ubermenu' ) ){ ubermenu( 'main' , array( 'theme_location' => 'main_navigation' ) ); } else{ $mm_style = !empty($mm_style) ? $mm_style : 'active-bg'; // TODO: Add new option to disable main menu for Kallyas // In case users want to add their own custom menu (or mega-menu)plugin ?> <div class="sh-component main-menu-wrapper"> <?php // Load responsive trigger button zn_resmenu_wrapper(); $classes = array(); // Mainmenu 1st level active item style $menu_style = zget_option('menu_style', 'general_options', false, ''); if($menu_style == ''){ $menu_style = $mm_style; } $classes[] = 'mainnav--' . $menu_style; // 1st level submenu pointer $classes[] = apply_filters( 'kallyas_mainmenu_pointer_style', 'mainnav--pointer-dash' ); // Main Menu dropdown color scheme $classes[] = 'nav-mm--'.( zget_option( 'navmain_color_theme', 'general_options', false, '' ) == '' ? zget_option( 'zn_main_style', 'color_options', false, 'light' ) : zget_option( 'navmain_color_theme', 'general_options', false, '' ) ); $args = array( 'container' => 'div', 'container_id' => 'main-menu', 'container_class' => 'main-nav '.implode(' ', $classes), 'walker' => 'znmegamenu', 'link_before' => '<span>', 'link_after' => '</span>', ); zn_show_nav( 'main_navigation','main-menu main-menu-nav', $args ); ?> </div> <!-- end main_menu --> <?php } }
Depending on which header style you are using, you may want to adjust Kallyas’s flex sizing to allow the menu to be full width on mobile, by adding something similar to this in your CSS Tweaks
@media (max-width: 767px){ .site-header-main-center.fxb-sm-half { flex-basis:100%; } }
You can adjust the menu positioning, etc, in the UberMenu Control Panel, if necessary.
Old Solution
To manually integrate the menu, copy the header.php
into a child theme. Then find the code for the main menu (look for the HTML start and end contents, as the code itself may change in the theme):
<!-- main menu --> <nav id="main_menu" class="<?php if ( !empty ( $data['res_menu_style'] ) && $data['res_menu_style'] == 'smooth' ) { echo 'smooth_menu'; } ?>"> <?php if ( !empty ( $data['res_menu_style'] ) && $data['res_menu_style'] == 'smooth' ) { echo '<div class="zn_menu_trigger"><a href="">'.__('Menu',THEMENAME).'</a></div>'; } ?> <?php zn_show_nav('main_navigation'); ?> </nav> <!-- end main_menu -->
Conditionally replace it with UberMenu like this:
<?php if( function_exists( 'ubermenu' ) ): ?> <?php ubermenu( 'main' , array( 'theme_location' => 'main_navigation' ) ); ?> <?php else: ?> <!-- main menu --> <nav id="main_menu" class="<?php if ( !empty ( $data['res_menu_style'] ) && $data['res_menu_style'] == 'smooth' ) { echo 'smooth_menu'; } ?>"> <?php if ( !empty ( $data['res_menu_style'] ) && $data['res_menu_style'] == 'smooth' ) { echo '<div class="zn_menu_trigger"><a href="">'.__('Menu',THEMENAME).'</a></div>'; } ?> <?php zn_show_nav('main_navigation'); ?> </nav> <!-- end main_menu --> <?php endif; ?>