Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #171526

    Hi,

    It seems that after the latest theme update the icon for the mobile mega menu icon isn’t positioned properly, see iphone screenshot: http://d.pr/i/QysV. This can be seen also by resizing my browser window.

    Any suggestions?

    Thanks!
    Wouter

    #172140

    Hi wvanderzee!

    Please try to insert following code into the quick css field to fix the issue

    
    @media only screen and (max-width: 989px) {
    #mobile-advanced, .mobile_active.mobile_menu_tablet #advanced_menu_toggle{display:block;}
    .mobile_active #advanced_menu_toggle{display: none;}
     }
     
    @media only screen and (max-width: 767px) {
    .mobile_active #advanced_menu_toggle{display: block;}
    }
    

    Regards,
    Peter

    #172409

    Sorry, that one doesn’t help. But I think what is causing this. I’m using a custom avia.js in my child theme for a custom breakpoint of the theme. When I switch that off, the menu toggle is displayed correctly.

    However, I do like to use the custom breakpoint. Hope you can help me out with this! I did one edit in the avia.js – and placed it in my child theme folder. At the responsive menu function on line number 88 I changed the switchWidth value from 767 to 989.

    This modification is based on the following support thread: http://www.kriesi.at/support/topic/mobile-menu-tablet-breakpoint/.

    Also – as mentioned in the thread – In the functions.php I’ve added:

    // WZ: For custom breakpoint mobile menu toggle
    // Make these Child functions load after Parent functions
    add_action( 'after_setup_theme', 'childtheme_late_functions' );
    function childtheme_late_functions() {
    	// Swap out Parent's js/avia.js for Child's js/avia.js
    	add_action( 'wp_enqueue_scripts', 'childtheme_menu_breakpoint' );
    	function childtheme_menu_breakpoint() {
    		wp_dequeue_script( 'avia-default' );
    		wp_enqueue_script( 'childtheme-avia-js', get_stylesheet_directory_uri() . '/js/avia.js', array( 'jquery' ), 1, true);
    	}
    }

    Let me know if you need more information.
    Thanks!

    #172838

    Hi!

    Can you please give us a link to the actual website? We can adjust the position of the toggle menu via CSS.

    Cheers!
    Ismael

    #172924
    This reply has been marked as private.
    #174426

    Hi!

    You actually have 2 toggle selections getting loaded into your header. Did you modify the theme header.php or any other functions?

    Best regards,
    Devin

    #175028

    Hi Devin,

    I’ve not touched the header.php, but there’s a custom function in functions.php in the child theme folder that probably effects the header. This is the function as mentioned in one of replies above (#172409).

    When I switch that function off, the menu toggle is displayed correctly. But than I also loose the custom breakpoint. If you know another solution for setting the custom breakpoint, I’d like to hear that!

    Thanks!
    Wouter

    #175936

    Okay, try changing the function to:

    
    // WZ: For custom breakpoint mobile menu toggle
    // Make these Child functions load after Parent functions
    add_action( 'after_setup_theme', 'childtheme_late_functions' );
    function childtheme_late_functions() {
    	// Swap out Parent's js/avia.js for Child's js/avia.js
    	add_action( 'wp_enqueue_scripts', 'childtheme_menu_breakpoint' );
    	function childtheme_menu_breakpoint() {
    		wp_dequeue_script( 'avia-default' );
    		wp_deregister_script('avia-default');
    		wp_enqueue_script( 'childtheme-avia-js', get_stylesheet_directory_uri() . '/js/avia.js', array( 'jquery' ), 1, true);
    	}
    }
    #177301

    Hi Devin, no luck, it doesn’t solve it.

    I tried to hide the upper right menu toggle with css, which works, see code below. The only thing now is that the icon is missing. Can you help me with that one? If it is possible to – e.g. with css – display the default mobile menu toggle icon, than I’m happy.

    /* mobile menu toggle fix */
    
    #header > a#advanced_menu_toggle {
    	display: none;
    }
    
    #header #header_main a#advanced_menu_toggle {
    	display: block;
    }
    
    	@media only screen and (min-width: 990px) {
    		#header #header_main a#advanced_menu_toggle {
    			display: none;
    		}
    	}
    #177390

    It would be best/easiest I think to just edit the parent file and keep a changelog.txt of your own with the changes you did so they can be re-applied after updates.

    The wp_dequeue_script( 'avia-default' ); wp_deregister_script('avia-default'); ` from before should be clearing out the parent but for some unknown reason it isn’t.

    Just skipping over the need for it in this instance then would be the best I believe. You could even possibly try deleting the parent avia.js file since you have it in your child now so that after an update all you need to do is delete the parent (unless it had a change like 2.4 will have).

    #182952

    After the update of Enfold 2.4 it seems to work fine. Thanks for the support.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Mobile menu toggle’ is closed to new replies.