Off-Canvas Menu (Avada)

Off-canvas menu is getting popular than ever. Moreover, Avada is the best selling WordPress theme. Have you ever wondered how to make Avada with off-canvas navigation menu?

First of all, you do not need to make any changes in your header.php or any HTML changes! We will add only JavaScript (jQuery) and some CSS styling. Remember to check your classes, they might be different. This is done of a fresh Avada copy without any plugins or changes.

jQuery

 //OFF CANVAS MENU
    $('.fusion-icon-bars').click(function() {
        $('.fusion-mobile-nav-holder').stop().slideToggle();
    });
    var tags = false;
    $(".fusion-icon-bars").click(function() {
        $(this).addClass('fa fa-times');
        $('.fusion-mobile-nav-holder').addClass('open');
        if ($(".fusion-mobile-nav-holder").hasClass("open")) {
            $("#main, .fusion-page-title-bar, .fusion-logo, .container, .fusion-footer").not('.fusion-mobile-nav-holder').click(function() {
                $('.fusion-mobile-nav-holder').removeClass('open');
                $(".fusion-icon-bars").removeClass('fa fa-times');
            });
        }

    });

CSS

@media (max-width: 767px) {
         /* Off-Canvas Menu */
    .fusion-mobile-nav-holder {
        display: block !important;
        visibility: hidden;
        position: fixed;
        -webkit-transition: -webkit-transform 500ms ease, visibility 500ms linear, opacity 500ms linear;
        -moz-transition: -moz-transform 500ms ease;
        -o-transition: -o-transform 500ms ease;
        transition: transform 500ms ease, visibility 500ms linear, opacity 500ms linear;
        -webkit-transform: translate3d(210px, 0, 0);
        -moz-transform: translate3d(210px, 0, 0);
        -ms-transform: translate3d(210px, 0, 0);
        -o-transform: translate3d(210px, 0, 0);
        transform: translate3d(210px, 0, 0);
        width: 240px;
        opacity: 0;
        top: 0;
        right: 0;
        height: 100% !important;
        background-color: #eee;
        padding-top: 0 !important;
        z-index: 9999999;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
         -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .fusion-mobile-nav-holder.open {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translate3d(-30px, 0, 0);
        -moz-transform: translate3d(-30px, 0, 0);
        -ms-transform: translate3d(-30px, 0, 0);
        -o-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
    }
    #main.overlay {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9998;
        background-color: rgba(0, 0, 0, 0.5);
    }
    body, html, #wrapper, #main {
        height: 100%;
    }
    .fusion-footer-copyright-area {
        z-index: 0;
    }
}

That’s it. Enjoy your off-canvas navigation menu in Avada. If you still do not achieve the effect, remember to check the classes!

What do you think? Is there a better way to do it?

7 comments on “Off-Canvas Menu (Avada)

  • Michael

    Is there a working example?

    Reply
  • BillyBoy

    Hi,

    Do i put the jQuery snippet in the functions.php ?

    Tks

    Reply
    • BillyBoy

      Could you please give us a little “how-to” ?

      Cheers

      Reply
  • J

    Will that file get removed or overwritten on updates of the theme?

    Reply
    • Hello J,

      You must always use a child theme if you want to avoid this problem. Avada comes with 2 folders (main theme and child theme).

      In Avada-Child folder create a file named “theme.js” and paste the code above. Lastly, include this file in your child theme by adding the code BELOW in functions.php in child theme.
      wp_enqueue_script('scripts-child', get_stylesheet_directory_uri() . '/theme.js', array( 'jquery' ), '1.0.1', true );

      Reply

Leave a Reply