wc-barton
10/24/2018 - 4:12 PM

Enable sub menus in flyout menu

Avada flyout menus disable submenu functionality but still render them in the html. This script disables the link in the parent menu item and makes clicking on them display the submenu. You may need to add a mobile only menu item to get to the parent level menu item and css styling to make it apparent that there is a submenu. To make a menu item mobile only, add these classes to it from the wordpress dashboard: fusion-no-medium-visibility fusion-no-large-visibility

example
content_copyfile_download
/* Adds an arrow next to menu items with sub menus */
/* You will most likely need to adjust this per site ~~~~~~~~~~~~~~~~~~~~~ */
.fusion-flyout-mobile-menu .menu-item-has-children > a span::after {
    content: '\e61f';
    display: inline-block;
    font-family: icomoon;
    font-size: 18px;
    width: 18px;
    line-height:35px;
    color:#fff;
    position: static;
	margin-left: 1em;
}


/* These will most likely be fine as they are ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Theis makes it so you can't scroll away from the menu and search icons */
.fusion-flyout-active .fusion-header-has-flyout-menu-content {
    position: fixed;
    width:calc(100% - 60px);
}

/* This makes the current nav item open by default */
.fusion-flyout-mobile-menu.fusion-mobile-nav-holder .menu-item-has-children.fusion-mobile-current-nav-item .sub-menu {
	display: block;
}
custom
content_copyfile_download
//enable child menu items on mobile flyout menu (works like an accordion element)
//Must be inside an on ready function
function menuSetup() {
    //enable child menu items on mobile flyout menu (works like an accordion element)
    $('.fusion-flyout-menu .menu-item-has-children > a').click(function(e) {
      e.preventDefault();
        
      $('.fusion-flyout-menu .menu-item-has-children.open > .sub-menu').not($(this).next('.sub-menu')).slideUp();
      $('.fusion-flyout-menu .menu-item-has-children.open').not($(this).parents('.menu-item-has-children')).toggleClass('open');

      console.log($(this));
      console.log($(this).parents('.menu-item-has-children'));
      $(this).parents('.menu-item-has-children').toggleClass('open');
      $(this).next('.sub-menu').slideToggle();
    });
}