Mobile menu not working since upgrade to Hestia Pro
-
Hi,
since upgrading to Hestia pro a couple of weeks ago, I’ve had some issues with the mobile version.
1: The lazy load on mobile option from SG optimizer do not work anymore, had to switch it off. (Images never show up) This I can do without, not that important but if you have an idea I’ll all ears.
2: The biggest issue: the drop down main menu on mobile is not working anymore. When i tap on the 3 horizontal bars, the bars do change color but no drop down, no matter the page.
I may have not done the copy paste of my previous custom lines of code properly from the hestia-child to the new hestia-pro-child. I simply copied the files from one to the other hoping for the best, and this seems to be the only real issue that arose.
my functions.php file:
<?php if ( !defined( 'ABSPATH' ) ) exit; if ( !function_exists( 'hestia_child_parent_css' ) ): function hestia_child_parent_css() { wp_enqueue_style( 'hestia_child_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap' ) ); if( is_rtl() ) { wp_enqueue_style( 'hestia_child_parent_rtl', trailingslashit( get_template_directory_uri() ) . 'style-rtl.css', array( 'bootstrap' ) ); } } endif; add_action( 'wp_enqueue_scripts', 'hestia_child_parent_css', 10 ); /** * Import options from Hestia PRO * * @since 1.0.0 */ function hestia_pro_child_get_parent_options() { $hestia_mods = get_option( 'theme_mods_hestia-pro' ); if ( ! empty( $hestia_mods ) ) { foreach ( $hestia_mods as $hestia_mod_k => $hestia_mod_v ) { set_theme_mod( $hestia_mod_k, $hestia_mod_v ); } } } add_action( 'after_switch_theme', 'hestia_pro_child_get_parent_options' );
My header.php file:
<?php /** * The template for displaying the header * * Displays all of the head element and everything up until the page header div. * * @package Hestia * @since Hestia 1.0 */ $wrapper_div_classes = 'wrapper '; if ( is_single() ) { $wrapper_div_classes .= join( ' ', get_post_class() ); } $layout = apply_filters( 'hestia_header_layout', get_theme_mod( 'hestia_header_layout', 'default' ) ); $disabled_frontpage = get_theme_mod( 'disable_frontpage_sections', false ); $wrapper_div_classes .= ( ( is_front_page() && ! is_page_template() && ! is_home() && false === (bool) $disabled_frontpage ) || ( class_exists( 'WooCommerce' ) && ( is_product() || is_product_category() ) ) || ( is_archive() && ( class_exists( 'WooCommerce' ) && ! is_shop() ) ) ) ? '' : ' ' . $layout . ' '; $header_class = ''; $hide_top_bar = get_theme_mod( 'hestia_top_bar_hide', true ); if ( (bool) $hide_top_bar === false ) { $header_class .= 'header-with-topbar'; } ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta name="B-verify" content="5f234ba74231b974419dfc54131cda59479cefcb" /> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-P8NFLL7');</script> <!-- End Google Tag Manager --> <meta charset='<?php bloginfo( 'charset' ); ?>'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <?php endif; ?> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.3&appId=450983202342745&autoLogAppEvents=1"></script> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P8NFLL7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <div class="<?php echo esc_attr( $wrapper_div_classes ); ?>"> <header class="header <?php echo esc_attr( $header_class ); ?>"> <?php hestia_before_header_trigger(); do_action( 'hestia_do_top_bar' ); do_action( 'hestia_do_header' ); hestia_after_header_trigger(); ?> </header>
My additional CSS in customize mode:
.hestia-about { background-attachment: fixed; color: #3C4858; } .sub-title { font-size: 17px; font-weight: 500; } .btn { font-size: 14px; font-weight: 600; } .navbar .navbar-nav > li > a { font-weight: 600; font-size: 15px; } .navbar { background-color: #fafafa } .main { position: relative; background: #F7F7F7; } .copyright.pull-right { display: none; } aside .widget a { color: #F2482D; font-weight: bold; } .wp-caption-text { font-weight: 300; } #content-desktop {display: block;} #content-mobile {display: none;} @media screen and (max-width: 768px) { #content-desktop {display: none;} #content-mobile {display: block;} } @media only screen and (max-width: 768px) { .mc-banner { display: none !important; }
Hopefully something in there should scream “nooooB” and therefore an easy fix!
Thanks
The page I need help with: [log in to see the link]
- The topic ‘Mobile menu not working since upgrade to Hestia Pro’ is closed to new replies.