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.


    $('.fusion-icon-bars').click(function() {
    var tags = false;
    $(".fusion-icon-bars").click(function() {
        $(this).addClass('fa fa-times');
        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-icon-bars").removeClass('fa fa-times');



@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;
    } {
        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?

9 comments on “Off-Canvas Menu (Avada)

  • Michael

    Is there a working example?

  • BillyBoy


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


    • BillyBoy

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


  • J

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

    • 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 );

  • Squirrel

    Hi Alexander,

    clever code to get that off canvas menu, thank you!

    Do you have an idea how to start with the following problems:
    long menus (and/or tiny vertical browsers sizes) need an option to scroll the menu to reach all entries, any idea how to add a custom scrollarea?

    I’ll try to add a close button for the menu, any directions where to do it best?
    (Is adding custom html code to the class via jquery a viable way?)

    I’d like to keep the current page highlighted and the submenu to be open if you return to the menu. E.g. in your Waketo example: If you’re visiting E-Learning > Video-Kurse and open the menu there: I need “E-Learning” to be expanded and “Video-Kurse” to be highlighted. I haven’t looked into that yet – hopefully there’s a css class to do that as well. Any hints?


  • Hi Squirrel,

    1. You can add a css “overflow: scroll;” to the container which holds the menu (usually UL)
    2. You can add an icon. For example, if you use FontAwesome 5 – . With jQuery you can toggleClass(‘fa-close’);
      //responsive nav menu button
      var pull = $('#pull');
      var tags = false;
      menu = $('.main-navigation ul');
      $(pull).click(function(e) {
    3. Any time you click on a menu item, with jQuery click event you can add a class and style it.

Leave a Reply to Alexander Georgiev Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.