dropdown menu in side bar menu

Hey lelouxwebdesign,
Thanks for the link to your site, to change the way sub-menu items are shown in the sidebar menu from popping out to the right like this:

to droping down below like this:

Add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function make_submenu_sidebar_menu_items_drop_down_on_click() { ?>
  <script>
	  (function($){
   $(document).ready(function(){ 
   		$('.html_header_sidebar.html_header_left #avia-menu > li.menu-item-has-children').find('ul').hide();
        $('.html_header_sidebar.html_header_left #avia-menu > li.menu-item-has-children').click(function () {  
            $('.html_header_sidebar.html_header_left #avia-menu > li.menu-item-has-children').not(this).find('ul').hide();  
            $(this).find('ul').toggle().toggleClass('is-visible');
        });  
     });  
})(jQuery);
 </script>
  <?php
}
add_action( 'wp_footer', 'make_submenu_sidebar_menu_items_drop_down_on_click', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.html_header_sidebar.html_header_left .av-main-nav ul {
    left: 0;
}
.html_header_sidebar.html_header_left .av-main-nav ul {
    position: relative;
}
.html_header_sidebar.html_header_left ul.sub-menu.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
}

Please note that this works “on click” and not “on hover”, the click is needed to close the menu and touch devices like tablets don’t have a “on hover” so the menu would not open for them. Also your parent menu item will need to only have a hash mark and not a link to a page otherwise it will navigate to the page instead of opening the menu.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike