How to switch mobile tab back to the dropdown type.
We’ve recently updated the mobile menu to a tab style with the release of version 6.7.3, as it aligns with current trends and has been a popular request from our customers.
However, we understand that some customers prefer the original dropdown style. Our company values customer feedback and opinions. To sole this proble, we will provide instructions on how to switch the mobile tab back to the dropdown type.
Step 1: Create and Use Porto Child Theme
To address, you must customize the code with the Child Theme. So you must use Child theme.
Step 2: Insert the custom code to Child theme
Please insert the following code into the functions.php of the child theme when you are ready.
After customizing the code, the mobile tab can be transformed into a dropdown style, disregarding the tab options in the Theme Option.
// Customize Mobile Menu
add_action( 'after_setup_theme', 'disable_porto_mobile_tab' );
add_filter( 'porto_mobile_menu', 'porto_show_mmenu_dropdown' );
// Change Mobile Tab to Drop Down Style
function disable_porto_mobile_tab() {
global $porto_settings;
if ( isset ( $porto_settings['mobile-panel-type'] ) && 'side' == $porto_settings['mobile-panel-type'] && isset( $porto_settings['show-mobile-menus'] ) && sizeof( $porto_settings['show-mobile-menus'] ) >= 2 ) {
$porto_settings['show-mobile-menus'] = array();
}
}
// Show Mobile Tab Menu as DropDown
function porto_show_mmenu_dropdown( $output ) {
global $porto_settings;
$html = '';
if ( isset( $porto_settings['menu-login-pos'] ) && 'main_menu' == $porto_settings['menu-login-pos'] ) {
if ( is_user_logged_in() ) {
$logout_link = '';
if ( class_exists( 'WooCommerce' ) ) {
$logout_link = wc_get_endpoint_url( 'customer-logout', '', wc_get_page_permalink( 'myaccount' ) );
} else {
$logout_link = wp_logout_url( get_home_url() );
}
$html .= '<li class="menu-item"><a href="' . esc_url( $logout_link ) . '">';
$html .= ( isset( $porto_settings['menu-show-login-icon'] ) && $porto_settings['menu-show-login-icon'] ) ? '<i class="avatar">' . get_avatar( get_current_user_id(), $size = '24' ) . '</i>' : '';
$html .= esc_html__( 'Log out', 'porto' ) . '</a></li>';
} else {
$login_link = '';
$register_link = '';
if ( class_exists( 'WooCommerce' ) ) {
$login_link = wc_get_page_permalink( 'myaccount' );
if ( get_option( 'woocommerce_enable_myaccount_registration' ) === 'yes' ) {
$register_link = wc_get_page_permalink( 'myaccount' );
}
} else {
$login_link = wp_login_url( get_home_url() );
$active_signup = get_site_option( 'registration', 'none' );
$active_signup = apply_filters( 'wpmu_active_signup', $active_signup );
if ( 'none' != $active_signup ) {
$register_link = wp_registration_url( get_home_url() );
}
}
$html .= '<li class="menu-item"><a class="porto-link-login" href="' . esc_url( $login_link ) . '">';
$html .= ( isset( $porto_settings['menu-show-login-icon'] ) && $porto_settings['menu-show-login-icon'] ) ? '<i class="fas fa-user"></i>' : '';
$html .= esc_html__( 'Log In', 'porto' ) . '</a></li>';
if ( $register_link && isset( $porto_settings['menu-enable-register'] ) && $porto_settings['menu-enable-register'] ) {
$html .= '<li class="menu-item"><a class="porto-link-register" href="' . esc_url( $register_link ) . '">';
$html .= ( isset( $porto_settings['menu-show-login-icon'] ) && $porto_settings['menu-show-login-icon'] ) ? '<i class="fas fa-user-plus"></i>' : '';
$html .= esc_html__( 'Register', 'porto' ) . '</a></li>';
}
}
}
$output = '';
ob_start();
$main_menu = porto_get_meta_value( 'main_menu' );
if ( has_nav_menu( 'main_menu' ) || $main_menu ) :
$args = array(
'container' => '',
'menu_class' => 'mobile-menu accordion-menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'fallback_cb' => false,
'walker' => new porto_accordion_navwalker(),
);
if ( $main_menu ) {
$args['menu'] = $main_menu;
} else {
$args['theme_location'] = 'main_menu';
}
wp_nav_menu( $args );
$output .= str_replace( ' ', '', ob_get_clean() );
if ( $html ) {
$output .= 'mobile-html';
$output = preg_replace( '/<\/ul>mobile-html/', $html . '</ul>', $output, 1 );
$html = false;
}
endif;
$header_type = porto_get_header_type();
$secondary_menu = ( '19' == $header_type || empty( $header_type ) ) ? true : false;
if ( $secondary_menu ) {
ob_start();
$secondary_menu = porto_get_meta_value( 'secondary_menu' );
if ( has_nav_menu( 'secondary_menu' ) || $secondary_menu ) {
$args = array(
'container' => '',
'menu_class' => 'mobile-menu accordion-menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'fallback_cb' => false,
'walker' => new porto_accordion_navwalker(),
);
if ( $secondary_menu ) {
$args['menu'] = $secondary_menu;
} else {
$args['theme_location'] = 'secondary_menu';
}
wp_nav_menu( $args );
}
$output .= str_replace( ' ', '', ob_get_clean() );
}
// sidebar menu
ob_start();
$sidebar_menu = porto_get_meta_value( 'sidebar_menu' );
if ( has_nav_menu( 'sidebar_menu' ) || $sidebar_menu ) {
$args = array(
'container' => '',
'menu_class' => 'mobile-menu accordion-menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'fallback_cb' => false,
'walker' => new porto_accordion_navwalker(),
);
if ( $sidebar_menu ) {
$args['menu'] = $sidebar_menu;
} else {
$args['theme_location'] = 'sidebar_menu';
}
wp_nav_menu( $args );
}
$output .= str_replace( ' ', '', ob_get_clean() );
// Top Navigation Menu
ob_start();
$menu = porto_mobile_top_navigation();
if ( $menu ) {
echo '<div class="menu-wrap">' . $menu . '</div>';
}
$output .= ob_get_clean();
if ( $output && $html ) {
$output = preg_replace( '/<\/ul>$/', $html . '</ul>', $output, 1 );
} elseif ( ! $output && $html ) {
$output = '<ul class="' . 'mobile-menu accordion-menu' . '" id="menu-main-menu">' . $html . '</ul>';
}
return $output;
}
