Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 27, 2014 at 6:03 pm #341636
    weathertight

    Hi guys, I’m wondering if there are any additional options for the mobile menu. Is there a way that once the menu is open for a user to hit their back button and have the menu go away? Or anyway to have the menu only slide out 3/4 of the way and when someone would tap the page then the menu would go away?

    October 29, 2014 at 8:03 am #342592
    Josue

    Hey!

    No there are not additional options for the mobile menu but you can change its behavior with some custom CSS and JavaScript, try adding this code to the Quick CSS:

    #header:after, #main:after {
    content: "";
    background: black;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    transition: all linear 0.1s;
}
.show_mobile_menu #header:after, .show_mobile_menu #main:after {
    opacity: 0.5;
    pointer-events: auto;
}

#mobile-advanced{
	background: #F7F7F7;
	height: 100%;
	-webkit-transform:  scale(1);
	-moz-transform:   scale(1);
	-ms-transform:    scale(1);
	transform:      scale(1);
	-webkit-transition: all 0.13s ease;
	-moz-transition:  all 0.13s ease;
	transition:     all 0.13s ease;
}

.show_mobile_menu #mobile-advanced{
	-webkit-transform:  translate(-80%, 0);
	-moz-transform:   translate(-80%, 0);
	-ms-transform:    translate(-80%, 0);
	transform:      translate(-80%, 0);
}
.avia_transform3d .show_mobile_menu #mobile-advanced{
	-webkit-transform:  translate3d(-80%, 0, 0);
	-moz-transform:   translate3d(-80%, 0, 0);
	transform:      translate3d(-80%, 0, 0);
}

    And this to a child enqueued custom JS file or in the Enfold GA field:

    (function($){
    $(window).load(function() {
    	$('#header, #main').on('click', function(){
		$("#advanced_menu_hide").trigger('click');
	});
    });
})(jQuery);

    Cheers! 
    Josue

    October 29, 2014 at 3:47 pm #342755
    weathertight

    Thanks, I just have a question about this part “And this to a child enqueued custom JS file or in the Enfold GA field:” I am using a child theme. How do I do that?

    October 29, 2014 at 3:52 pm #342761
    Yigit

    Hey!

    Please create a custom JS file ( could be named custom.js ) and place it inside your child theme/js folder and add following code to Functions.php file

    function custom_js_enqueue() {
	wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_js_enqueue' );

    or add the code to Google Analytics field in Enfold theme options

    Cheers!
    Yigit

    October 29, 2014 at 4:39 pm #342796
    Josue

    Either that or add this at the very end of your child theme functions.php file:

    function add_custom_script(){
?>
<script>
(function($){
    $(window).load(function() {
    	$('#header, #main').on('click', function(){
		$("#advanced_menu_hide").trigger('click');
	});
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    Regards,
    Josue

    October 29, 2014 at 5:06 pm #342817
    weathertight

    Hi, the functionality seems to work, but for some reason it is putting black blocks on the left hand side of the homepage. Any ideas?

    October 29, 2014 at 5:17 pm #342822
    Josue

    If you are referring to this, then modify the first part of the CSS code to this:

    #header:after, #main:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    transition: all linear 0.1s;
}

    Best regards,
    Josue

    October 29, 2014 at 5:21 pm #342826
    weathertight

    No sorry, I removed the code, so you couldn’t see it. I have put it back in now, please check it now. There are large black blocks completely covering areas of the page.

    October 29, 2014 at 6:11 pm #342859
    Josue

    Hmm, i’m not seeing that on my end – http://screencast.com/t/vy9DOn1rZ

    Can you post a screenshot of your view?

    Cheers!
    Josue

    October 29, 2014 at 8:49 pm #342970
    weathertight

    Here you go: http://www.weathertightcorp.com/wp-content/uploads/2014/10/Screenshot_2014-10-29-13-47-18.png

    October 30, 2014 at 5:09 am #343237
    Josue

    Hi!

    It’s that Chrome or Android stock browser? please note that this modification it’s something a little hackish so support for it may be limited.

    Cheers!
    Josue

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.