Submenu item problems

[riugn557]

Hi there,

I’m having a problem trying to alter the submenu that you can see on this page ( https://thelanguagesherpa.com ) when you hover over ‘about’:

There is a delay of a couple of seconds before the submenu appears. Do you know how I can make it appear instantly when you hover over it?

Thank you!
LS

[jumar]

Hello @riugn557,

Thanks for writing in!

I can see you’re using an Inline Navigation element. Unfortunately, this element doesn’t have transition effect settings in Cornerstone.

You can however try this workaround. Please go to Pro > Theme Options > JS, and add this code:

$(document).ready(function(){
    $('.sub-menu.x-dropdown').hide();
        $( '.x-anchor-menu-item .x-interactive.x-active' ).hover( function() {
             _this = $(this).parents().find('.sub-menu.x-dropdown');
             setTimeout(function() { 
             _this.fadeIn(); }, 100);
        }, function() {
       _this.fadeOut();
    });
});

Hope this helps.

[riugn557]

Hi Jumar,

I added the JS but the delay is still there unfortunately…

Thank you,
LS

[Prasant]

Hello @riugn557,

Thanks for updating the thread.

Please add following CSS under Pro > Theme Options > CSS to change submenu hover effect:

.sub-menu.x-dropdown {
    transition: all .1s linear;
}

Thanks.

[riugn557]

Hi Prasant,

That works perfectly, thank you!

LS

[friech]

You’re more than welcome, glad we could help.

Cheers!