-1

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!

closed as off-topic by Jacob Peattie, cjbj, rudtek, Jack Johansson May 21 at 6:42

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

1

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

  • Hello Vishwa, thank you a lot for your help! Unfortunately I don't know jQuery very well... So, I read on the Internet that I need to include jQuery in functions.php which I did typing "function include_jQuery() { if (!is_admin()) { wp_enqueue_script('jquery'); } } add_action('init', 'include_jQuery');" – Tommaso Cerci May 6 at 8:09
  • is this solves your problem? if so, you can accept/upvote the answer so it'd be helpful to someone else – Vishwa May 6 at 8:10
  • But it still doesn't work. I changed your #wrapper .fusion... into "ul.sub-menu" Doing this will hide the sub-menu as you can see on the website, just if I write display: none !important, but the jQuery doesn't re-open the sub-menu – Tommaso Cerci May 6 at 8:14
  • try $("#menu-item-12049").hover(function(){alert("hover")} to see whether hover event works. To include jQuery, add following to the functions.php in your theme folder. function add_jq_theme() { wp_enqueue_script( 'script-name', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'add_jq_theme' ); – Vishwa May 6 at 8:47
  • jQuery seems to have some effects now, the sub-menu now remains close (and does not open on hover) in every page, even "clienti" and "contatti" XD The important thing, however, the alert function, doesn't work yet. So it seems that jQuery is properly included now, which is great, but probably the function code is not considered. I copied your alert function code in Avada Theme Options, in the box "Space before </head>" where I can put some JS code, in a mandatory <script> tag. Do you think it's a wrong place? – Tommaso Cerci May 6 at 10:00
0

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>
  • please take a note at my last comment – Vishwa May 6 at 11:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.