Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 7, 2013 at 10:28 am #171526
    wvanderzee

    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

    October 8, 2013 at 11:10 am #172140
    Dude

    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

    October 8, 2013 at 9:30 pm #172409
    wvanderzee

    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: https://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!

    October 9, 2013 at 3:38 am #172838
    Ismael

    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

    October 9, 2013 at 9:41 am #172924
    wvanderzee
    This reply has been marked as private.
    October 12, 2013 at 1:13 am #174426
    Devin

    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

    October 14, 2013 at 12:42 pm #175028
    wvanderzee

    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

    October 15, 2013 at 4:30 pm #175936
    Devin

    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);
	}
}
    October 18, 2013 at 9:17 am #177301
    wvanderzee

    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;
		}
	}
    October 18, 2013 at 2:27 pm #177390
    Devin

    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).

    October 31, 2013 at 2:38 pm #182952
    wvanderzee

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

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Mobile menu toggle’ is closed to new replies.