can mega menu open on hover?

[Greg Griffin]

Hi Bill,

I love the mega menu option! Is there a snippet that will allow the menu to open when I hover over the navigation bar item?

Thanks!

[Bill Robbins]

Good Morning Greg,

You can actually do that. The only trick is because that code is inside a javascript file, you can’t edit it with the WordPress theme editor. I don’t know why they won’t let you edit javascript or files that are in a sub-folder within another folder, but they won’t.

You’ll need to install and activate the WP Editor plugin or use an off-line editor and upload your changes. The plugin replaces the editor in the Appearance section of your dashboard with a “Theme Editor” option there. Whichever way you go, here’s what to do:

1. Open up the js folder inside the theme.
2. Find the mega.js file there.
3. Replace everything there with this:

   
   (be sure to copy the code directly from our support site and not the notification email)

   and save your changes.

That should do it. Let me know if you have any questions or trouble there.

Have a good weekend,
Bill

[Greg Griffin]

Hi Bill,

Thanks for this. Unfortunately, I could not get it to work. I installed the WP editor, and see where the plug in showed up as theme editor in the appearances menu. I found the file and the sub file. I pasted on the code, and I see the word “hover throughout the code.

Here is what I pasted.

var cbpHorizontalMenu=(function(){var b=jQuery(“#cbp-hrmenu > ul > li”),g=b.children(“a”),c=jQuery(“body”),d=-1;function f(){g.on(“hover”,a);b.on(“hover”,function(h){h.stopPropagation()})}function a(j){if(d!==-1){b.eq(d).removeClass(“cbp-hropen”)}var i=jQuery(j.currentTarget).parent(“li”),h=i.index();if(d===h){i.removeClass(“cbp-hropen”);d=-1}else{i.addClass(“cbp-hropen”);d=h;c.off(“hover”).on(“hover”,e)}return false}function e(h){b.eq(d).removeClass(“cbp-hropen”);d=-1}return{init:f}})();

I saved and cleared my cache to check the site, and no luck. Please advise.

Thanks!

[Bill Robbins]

Hey Greg,

I experimented with this a bit more this morning and you may want to go back to the original version of the file. While I could get the menus to open up on hover, clicking anything inside the menus was next to impossible after that. I would suggest sticking with the click to open. Here’s the code for that:

Let me know if you have any trouble rolling that back.

Thanks,
Bill

[Greg Griffin]

It works just like it did with the original code. So, if I’m understanding you correctly, I should roll back to the original code anyway, and there’s not really a way to open the mega menus by hovering?

[Greg Griffin]

Bill,

I’m unable to open the js file. I don’t know if my edits somehow messed up the file.

[Bill Robbins]

I don’t believe there’s a good way for them to open with this particular setup with only hovering. I’d go back with the original arrangement.

[Bill Robbins]

You may have to make the edit from inside your web host’s control panel (in the file browser there) or with a FTP program if the WP Editor plugin isn’t working for one reason or another.

[Greg Griffin]

Bill, I apologize. I was clicking on the folder icon, and not on the name of the folder. I’ll roll back to be on the safe side.

[Author]

Posts