Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #455156

    I am working on a child theme of Enfold which you can see at this address.

    I am looking to change the transition used in the main navigation menu where items are defined as buttons. I can’t find the source of the transition, I have tried changing the CSS but to no avail. As you can see I added a small ticker to the sub-menu and I want them both to fade in and out at the same speed.

    Thanks!

    #455582

    Hi Technoh!

    Thank you for using Enfold.

    What do you mean by transition? Are you trying to change the hover effect? A screenshot will help.

    Cheers!
    Ismael

    #455630

    Hi Ismael,

    Yes, I am trying to change the hover effect. I want to control how fast it shows the sub-menu (ease-in) and how fast it reverts to showing nothing (ease-out). Here are screenshots to demonstrate what I want to control:

    Start
    Transition
    Finish

    Is this controlled in Javascript or CSS? If so, which file and which line?

    Thanks!

    #455766

    Hi!

    You can modify the mouse over transition on js > avia.js, look for this code around line 1202:

    sublist.stop().css({visibility:'visible'}).animate({opacity:1}, 5000);
    

    Adjust animate duration:

    sublist.stop().css({visibility:'visible'}).animate({opacity:1});
    

    For the mouseleave event, edit the code below:

    sublist.stop().animate({opacity:0}, 5000, function()
    

    Replace it with:

    sublist.stop().animate({opacity:0}, function()
    

    Adjust the value as you please.

    Cheers!
    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.