Submenu item problems

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

Hello @riugn557,

Thanks for writing in! :slight_smile:

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.

Hi Jumar,

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

Thank you,
LS

Hello @riugn557,

Thanks for updating the thread. :slight_smile:

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

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

Thanks.

Hi Prasant,

That works perfectly, thank you!

LS

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

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.