Disabling submenu opening on hover action

[franticape]

What i want to achieve:

• Opening a submenu element when clicked and not when hovered as it natively does
• Disabling parent/main nav item redirection to page when clicked

How i want to achieve it:

I have noted that when a sub-menu exists, a function from the theme an x-active class to a few elements and that is what triggers the subelement list visualization.

I wanted to disable this event by using the code below and it almost works, but there seems to be another element that still adds the x-active.

 jQuery( "#mainnavbar .x-anchor-text-primary, #mainnavbar .x-anchor-sub-indicator, #mainnavbar .menu-item-has-children, #mainnavbar .x-anchor, #mainnavbar .x-anchor-content, #mainnavbar .x-dropdown" ).hover(
    function(e) {
      // Mouse Enters
      console.log('hover was entered!');
      e.stopPropagation();
      e.preventDefault();
    });

What i need from you:
I don’t really need you to write the code for me (but if you have one, then feel free to share it!) but i’d like to know HOW you add this behaviour, is it through a JS function? if it is then where can i find it? maybe i can understand better how to overwrite it

why:
The above code almost works, however if you hover over certain zones like in the margin zone of the subindicator or around the edges of the element, the content is triggered which makes me believe that the original code works in a different way

NOTE: I want to leave clear that i don’t need you to write the code for me (i know that’s out of the scope of the support), I just need to know your logic and maybe have some references, so i can figure what to do next.

[ruenel]

Hello Frantic Ape,

Thanks for writing in!

What you are trying to do is the modification of a theme’s element feature. We do not recommend doing so as it leads to a conflict or issues with other elements later on.

Instead of using the Navigation Inline element, why don’t you use the Navigation Collapsed or the Navigation Layered element? This element has an option for you to choose the Submenu trigger, you can use the “Anchor” or the “Sub Indicator” which in your case, the “Anchor” trigger or upon clicking on a menu item, the submenu will collapse below.

You can check out the live demo of these elements here:

• https://demo.theme.co/elements/#navigation-collapsed
• https://demo.theme.co/elements/#navigation-layered

Best Regards.

[franticape]

The reason is that i need to use a vertical inline navbar as per the client’s requirements (it needs to mirror the design of another platform of theirs)

if we know where is that feature located, we can maintain it later on, so that part is not a problem. can you please tell me where can i find such feature or what classes should i target in order to disable it, please?

Thanks in advance.

[ruenel]

Hello Frantic Ape,

The code that you are looking for can be found in app.js file which we do not recommend that you edit it because it contain the other coding for the theme features and the builder.

If you need a vertical inline bar, as per your client’s requirements, the Navigation Collapsed should do the job for you. Take this example below:

As you can see in the Navigation Collapsed element settings in the screenshot, the submenu trigger is the anchor which means that if you click on the “My People” menu item, it will expand and display the submenu items. You still have all the element controls for the menu items just like what you have in the navigation inline element.

Hope this makes sense.

[franticape]

Ah, i see. ok, huh i think i had confused that element with something else

thanks for the update and for letting me know where the code for the behaviour was!

[franticape]

Just one more thing. is it possible that the menu element remains collapsed when you select an element of the menu? if the active page is on a submenu, it should remain active and visible (right now it’s active on the menu, but not visible since you need to open the parent menu element in order to display the text).

[tristup]

Hi @franticape,

If the active menu item is in the submenu, but it is not possible to make the submenu open while on the active page.

Thanks

[franticape]

I coded the following snippet to get the job done, at least for now (i don’t really like it that much but it works):

/* ALWAYS ACTIVE SUBMENUS */
jQuery(document).ready(function($){
  $('#mainnavbar .x-always-active').addClass('x-active');
  $('#mainnavbar .x-always-active ul.sub-menu').removeClass('x-collapsed');
});

The above code is for future readers that would like to achieve the same. “#mainnavbar” is the id i gave to my collapsed navigation, so it cane be changed to whatever you want or removed entirely.

[marc_a]

Hi @franticape,

Thanks for sharing your idea and we’re glad that you’re able to figure it out! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.