• Resolved jimthirion

    (@jimthirion)


    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]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter jimthirion

    (@jimthirion)

    Adding a precision, the menu works fine when narrowing the desktop window to a mobile ratio.

    Hi @jimthirion,

    If you are using the PRO version of Hestia, you can always contact us here: https://themeisle.com/contact/

    The issue might be coming from a plugin conflict. Please try to backup your site, and try to deactivate all your plugins, one by one, to see if any of them is causing this issue to appear.

    Please let us know if this worked and if you have any more questions.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Mobile menu not working since upgrade to Hestia Pro’ is closed to new replies.