Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1212154

    Hey there

    I’ve got a query that relates to one of my earlier support requests.

    I’ve applied some heavy CSS modifications to the submenu and megamenu and need to remove the transition so that when you hover between menus they don’t overlap whilst fading.

    The code i’ve tried is

    #top #avia-menu .sub-menu {
        opacity: 0 !important;
    }
    #top #avia-menu li:hover > .sub-menu {
        opacity: 1 !important;
    }
    
    #top #avia-menu .avia_mega_div .sub-menu {
        opacity: 0 !important;
    }
    #top #avia-menu li:hover > avia_mega_div .sub-menu {
        opacity: 1 !important;
    }

    but the megamenu text and icons disappear?.

    Any help would be very much appreciated.

    Richard

    #1212746

    Hey Richard,

    Did you remove this css? It looks fine on my end.

    Best regards,
    Victoria

    #1212936

    Hey Victoria

    I didn’t leave the CSS as it didn’t help me achieve the result. I’m trying to remove the fading transition when you move the cursor between the two sub menus.

    Richard

    #1213343

    Hi Richard,

    I see no css transitions there, you need to look at the JavaScript in this file
    enfold/js/avia.js
    Here is the code to look for:
    Image 2020-05-15 at 18.33.25.png

    Best regards,
    Victoria

    #1214049

    Thanks Victoria. With a few tweaks I think i’ve sorted with CSS only:

    #top #avia-menu .avia_mega_div {
        opacity: 0 !important;
    }
    #top #avia-menu li:hover > .avia_mega_div {
        opacity: 1 !important;
    }

    Thanks
    Richard

    #1214490

    Hi,

    Great, I’m glad that you found a solution and thanks for sharing. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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