Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

I am facing an issue in the Avada vertical menu when the homepage is opened. Please note that all "Home", "Company profile" and "Servizi" link to the same page (the homepage).

The sub-menu under "Servizi" is already opened while I would prefer it was closed by default, and that it could be opened simply by hovering "servizi", as it works properly when you try hovering "Servizi" from both "Clienti" and "Contatti".

I am pretty sure there is an option in Avada/WP to do that, or otherwise by adding some JS code, but I really have no idea how to do it!

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

I am facing an issue in the Avada vertical menu when the homepage is opened. Please note that all "Home", "Company profile" and "Servizi" link to the same page (the homepage).

The sub-menu under "Servizi" is already opened while I would prefer it was closed by default, and that it could be opened simply by hovering "servizi", as it works properly when you try hovering "Servizi" from both "Clienti" and "Contatti".

I am pretty sure there is an option in Avada/WP to do that, or otherwise by adding some JS code, but I really have no idea how to do it!

• javascript
• css
• sub-menu

2 Answers 2

To do that, you have to set hidden attribute to the sub menu.

CSS

#wrapper .fusion-vertical-menu-widget.left .menu .sub-menu {
    display: none;
}

to toggle display on the menu on hover over servizi, you can add jQuery hover to the menu item.

jQuery

var subMenu = jQuery("#wrapper .fusion-vertical-menu-widget.left .menu .sub-menu");

jQuery("#menu-item-12049").hover(function(){
   subMenu.show();
  }, function(){
   subMenu.hide();
});

Note: You should change the class values to more appropriate values, these are just extracted from what I saw, but probably a good idea to get better css selectors

So, now it works perfectly as I would like when you hover "servizi"! The only problem is for the sub-menu single pages, where the sub-menu should remain opened always, like it did before

This is the code used currently in avada theme options:

<script>
jQuery(document).ready(function($){
var subMenu = jQuery("#wrapper .fusion-vertical-menu-widget.left .menu .sub-menu");
jQuery("#menu-item-12049").hover(function(){
subMenu.show();
}, function(){
subMenu.hide();
});
});
</script>