change mega menu dropdown behavior to "click" instead of "hover"?

[Israel Curtis]

So with nav items with submenus (much like your video demo with columns), I would prefer a solution where clicking the top nav item causes the submenu to appear (and stay put, unlike the current hover trigger, at least until another submenu is shown). Can you point me in the direction of the bits of javascript to change?

I’m also finding it impossible to modify certain bits of CSS in the mega menu, like the hover background found here

/assets/css/theme.css

.tb-primary-menu ul a:hover {
background: #f5f5f5;
}

normally CSS in my child theme easily overrides, but I can’t get any CSS to work with the mega menu nav items, no matter how specific the element or use of “!important”

Topic

[Jason Bobich]

Do you have a live link to the site where you’re trying to do the CSS change ?

[Israel Curtis]

work-in-progress 😉

http://liturgical.wpengine.com/degree-programs/

[Israel Curtis]

So it’s my first time playing with superfish, which seems to be how you’re handling the submenus. I did find the “themeblvd_global_config” filter for removing it entirely, which I guess I could do if I wanted to build a completely new solution from scratch to handle “click” events instead of “hover” for showing the submenu — but that seems overkill (and I’d lose all your nifty formatting).

I’ve also tried dequeueing your included superfish.min.js:

wp_enqueue_script( 'superfish', TB_FRAMEWORK_URI . '/assets/js/superfish.min.js', array('jquery'), '1.7.4' );

with my own later hook to ‘wp_enqueue_scripts’, where I dequeue ‘superfish’ (in an attempt to replace with a version I found that supposedly uses click instead of hover) — but in my child theme functions.php, no matter what priority I set, it never seems to dequeue 🙁

[Jason Bobich]

I’m also finding it impossible to modify certain bits of CSS in the mega menu, like the hover background found here

This would be correct:

.tb-primary-menu ul a:hover { ... }

… but I don’t see it in your child theme’s style.css anywhere. When I manually put it in your style.css with my Chrome dev tools, it works as expected. So double check how you’re maybe managing your CSS file, updating it, if there are possibly other errors in it around what you’re trying to add, etc.

==========

This whole thing around the dropdown menus is going to be tricky. You’re probably going to have to totally get rid of superfish with that global filter and use something else. I’m not sure.

There’s not just javascript involved, but CSS, too, which is in the main themeblvd.css file. The CSS controls it without javascript, and then the javascript comes in and enhances it by allowing for the menus to fade in and get the menus to interact with the user a little bit better. But I believe it’s all applied based on the main menu having the class “sf-menu”.

So in addition to using the global config filter, you’d have to get that class off the main menu. You can use the filter “themeblvd_primary_menu_args” — See /framework/includes/menu.php, around line 379.

Just trying to replace in a hacked version of some other random version of superfish from who knows when, that you found on the Internet, may not be a good approach. Maybe if you actually took the version of superfish used in the theme, looked at how it works, and then modified it, knowing and understanding what’s being changed could work. This isn’t a script I will probably update in the theme too often.

But anyway, in WordPress if you want to replace an enqueued file, you don’t need to de-enqueue it. That’s why every asset needs a unique ID. You’d just enqueue your’s first with the same ID, and it’ll get used instead.

function my_assets() {
    wp_enqueue_script( 'superfish', get_stylesheet_directory_uri() . '/js/my-superfish.js', array('jquery'), '1.7.4' );
}
add_action( 'wp_enqueue_scripts', 'my_assets', 9 ); // 9 would come before theme's JS

[Author]

Replies