Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 5, 2015 at 4:46 pm #455156
    Technoh

    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!

    June 7, 2015 at 6:44 am #455582
    Ismael

    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

    June 7, 2015 at 2:17 pm #455630
    Technoh

    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!

    June 8, 2015 at 8:21 am #455766
    Ismael

    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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.