Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • September 30, 2016 at 11:38 am #693611
    sandra-schwaiger

    hi, is it possible to have this nice transform-effect on hover a menue?
    https://www.ing-diba.at/

    September 30, 2016 at 5:14 pm #693943
    Yigit

    Hey!

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .av-main-nav > li > a:active:after, .av-main-nav > li > a:focus:after, .av-main-nav > li > a:hover:after {
    background-color: #767676;
    width: 100%;
}
.av-main-nav > li > a:after {
    display: inline-block;
    content: "";
    text-indent: -99999px;
    width: 0;
    height: .25rem;
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

    Best regards,
    Yigit

    September 30, 2016 at 8:28 pm #694025
    sandra-schwaiger

    Hi Yigit, thanks for your fast support. Now it looks like there would be a other disturbing line under the nice animated line.

    October 1, 2016 at 7:27 am #694161
    Rikard

    Hi,

    Sorry but I don’t understand what you mean by your last post, could you try to explain a bit further please?

    Thanks,
    Rikard

    October 3, 2016 at 4:51 pm #694720
    sandra-schwaiger

    on hover: there is more then one line (please take a look to the gif-screencast).
    – one line is well animated (thx)
    – but below, there is a unexpectet other line. not animated.

    this is looking uncleare and wrong. how can i show only the well animated line?

    October 4, 2016 at 6:44 am #694886
    Rikard

    Hi,

    Ok, thanks for the explanation, could you link to a page where we can see the issue please?

    Best regards,
    Rikard

    October 4, 2016 at 7:53 am #694912
    sandra-schwaiger

    link is in the field “privat”

    October 7, 2016 at 12:57 pm #696439
    Andy

    Hi,

    try this code:

    .av-main-nav li:hover .avia-menu-fx {
visibility: hidden;
opacity: 0;
}

    Hope this helps!

    Best regards,
    Andy

    October 13, 2016 at 11:30 pm #698924
    sandra-schwaiger

    nearly – the hover-line is not in the same line like the active-line . the hover-line is higher (on the screen left) .

    October 14, 2016 at 1:55 pm #699109
    Andy

    Hi,

    try this code:

    .avia-menu-fx {
bottom: 0px;
}

    and adjust the value if needed.

    Best regards,
    Andy

    October 16, 2016 at 10:53 pm #699722
    sandra-schwaiger

    hi andy, i tried it. now all lines are to hight :-(

    now it is nearly perfect: the centered-line-animation effect with a littel slow-animation looks cool!
    – but a small to-much-distance is under the hover-line. how can the hover-line goes a little bit down?

    thank you!

    October 16, 2016 at 11:10 pm #699724
    sandra-schwaiger

    i got it. not perfect, but good. if it goes better – i am happy.

    .av-main-nav > li > a:after {
    display: inline-block;
    content: "";
    text-indent: -99999px;
    width: 0;
    height: .1rem;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-bottom: -.1rem;
}
.av-main-nav li:hover .avia-menu-fx {
display: hidden;
opacity: 0;
}
#top .main_menu .menu li.active-parent-item .avia-menu-fx{
    opacity: 1;
    visibility: visible
}
/*.avia-menu-fx {
bottom: 0px;
}*/
    October 17, 2016 at 12:55 pm #699934
    Andy

    Hi,

    glad you’re happy now. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Menue hover transform effect’ is closed to new replies.