Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 20, 2014 at 4:56 am #370893
    Jirehly

    Hi,

    I am trying to use the fullwidth submenu on my website and at the moment all is working great. when in mobile mode, the submenu becomes a button and dropdown the menu when clicked, minus the fancy slide out effect. I was wondering if it would be possible to have the menu slide out vertically from the top when clicked instead of simply popping out. Kinda like the regular mobile menu except not sliding out diagonally from the top right but straight down.

    Thank you!

    Jireh

    • This topic was modified 9 years, 6 months ago by Jirehly.
    December 20, 2014 at 6:42 am #370927
    Josue

    Hey Jireh!

    Try adding this code to the Quick CSS:

    #mobile-advanced{
  right: 0;
  top: -100%;
  border-color: #242424;
  -webkit-transform:  scale(1);
  -moz-transform:   scale(1);
  -ms-transform:    scale(1);
  transform:      scale(1);
  -webkit-transition: all 0.3s ease;
  -moz-transition:  all 0.3s ease;
  transition:     all 0.3s ease;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

.avia_transform3d #mobile-advanced{
  -webkit-transform:  scale3d(1);
  -moz-transform:   scale3d(1);
  transform:      scale3d(1);
}

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

    Cheers! 
    Josue

    December 20, 2014 at 1:57 pm #370969
    Jirehly

    Hi Josue,

    Thanks for the code but I’m afraid nothing changed on my submenu in Mobile mode. The menu items still just appears. No transistions. Were you able to see my site?

    Jireh

    December 20, 2014 at 5:36 pm #370990
    Jirehly

    Just to emphasize.. this is a Full-Width Submenu. I checked the source codes and I see that is it using a different class/id name. Any clue?

    December 21, 2014 at 7:57 am #371227
    Josue

    Yes, i see. One thing that could work is to have the default menu enabled (but hidden with CSS) and using a custom jQuery function to make the click event on the full-width submenu toggle trigger the default mobile menu toggle, something like this (child theme / theme functions.php):

    function add_custom_script(){
?>
<script>
(function($){
    $(window).load(function() {
    	$('.av-submenu-container .mobile_menu_toggle').on('click', function(){ 
                 $('#advanced_menu_toggle').trigger('click');
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    Also, to make sure that the default fullwidth submenu never gets shown:

    .av-open-submenu{
    display: none !important;
}

    Regards,
    Josue

    December 21, 2014 at 4:05 pm #371275
    Jirehly

    Hi Josue,
    are you saying that when I click on the submenu button, the menu would appear from the top right corner as it would on a default mobile menu? If that is what you are suggesting, I’m afraid I can’t use it. What I am looking for is for the current submenu (exactly how it is looks now) to have either a fade or a scroll out transition when I click on the Submenu button. Possible?

    Jireh

    December 24, 2014 at 3:00 am #372358
    Jirehly

    Hi.. Any updates?

    December 24, 2014 at 4:00 am #372369
    Josue

    Hi!

    This will do it:

    @media only screen and (max-width: 767px) {

    .responsive #top .av-menu-mobile-active .av-subnav-menu {
        display: block;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.15s ease-out;
    }
    .responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu {
        max-height: 300px;
        transition: max-height 0.25s ease-in;

    }

}

    Cheers!
    Josue

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