[Resolved] drop-down menu speed

[orlando britain]

hi,

on the main navigation bar I have drop down menus. There is a slight delay for the sub-menu to drop down when you hover over the menu item.

I want it to drop down immediately like it does in the mystile theme and other eCommerce stores.

I have tried changing this CSS transition code (all ease-in-out 0.2s) to below code, in the child theme but it didn’t change the speed:

.main-navigation a {display: block;
text-decoration: none;
-webkit-transition:none !important ;
-moz-transition:none !important ;
-o-transition:none !important ;
transition: none !important ;

how would i go about doing this?

thanks

[Tom]

Are you trying to remove the delay, or the transition as a whole (so it just appears)?

[orlando britain]

hi tom,

I want it to drop down straight away when you hover over the link.

thanks,

orlando

[Tom]

Harder than it should be – I need to add a hook or something.

Give this a try: http://generatepress.com/forums/topic/disable-superfish-menu-fade-slide-transition/#post-116456

[orlando britain]

thanks tom – I have copied taht code to bottom of footer.php and this got it how I want it.
cheers

[Tom]

Cool – make sure you’re not altering core files, as you won’t be able to update the theme without losing your modification.

Definitely better off using GP Hooks or a child theme 🙂

[orlando britain]

good point, have just moved the code to a GP hook instead of core.
works perfect still.
thanks 🙂

[Tom]

No problem 🙂

[darutse]

Hi, the last code isn’t working for me, if I do this:

<script>
	jQuery(document).ready(function() {
		$('ul.sf-menu').superfish('destroy');
		$('ul.sf-menu').superfish({
			delay       : 0,
			disableHI	: true,
			animation   : { opacity: 'show' },
			speed       : 1
		});
	});
</script>

note the $ sign

it works but breaks the search and outputs some error in developer console, please help

[Tom]

The theme is no longer using superfish – I wrote my own script which is much more lightweight.

Now you can do something like this:

<script>
    jQuery( window ).load( function() {
        jQuery( '.sf-menu .menu-item-has-children' ).GenerateDropdownMenu.destroy();
        jQuery( '.sf-menu .menu-item-has-children' ).GenerateDropdownMenu({
                transition_speed: 0,
		open_delay: 0,
		close_delay: 0
        });
    });
</script>

[darutse]

Thank you Tom!

[Tom]

You’re welcome 🙂

[Patrick]

Hello Tom,
I want to get rid of the delay too, I added this code to the wp_footer hook and aktivated php but it didn’t work. Where do I have to add the code to have my main Navigation without delay?

<script>
    jQuery( window ).load( function() {
        jQuery( '.sf-menu .menu-item-has-children' ).GenerateDropdownMenu.destroy();
        jQuery( '.sf-menu .menu-item-has-children' ).GenerateDropdownMenu({
                transition_speed: 0,
		open_delay: 0,
		close_delay: 0
        });
    });
</script>

[Tom]

No need to activate PHP for that one 🙂

Are you using the latest version of the theme?

[Patrick]

Ok I deaktivaded php, that did not help.

I’m using GeneratePress 1.3.23

[Author]

Posts