Menu button animation - Support | Kriesi.at

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

Author

Posts
March 25, 2019 at 2:15 pm #1082676

Niettt
Participant

Hello,
Is it possible for the buttons to have an animation on hover like the on the page below?
http://fotovolt.eu/index.php

March 25, 2019 at 11:15 pm #1082874

Niettt
Participant

Nobody?

March 26, 2019 at 12:22 am #1082903

Niettt
Participant

ok, i have this:
.av-main-nav > li > a:active:after, .av-main-nav > li > a:focus:after, .av-main-nav > li > a:hover:after {

background-color: grey;
width: 100%;
}
.av-main-nav > li > a:after {
display: inline-block;
content: “”;
text-indent: -99999px;
width: 0;
height: 70px;
-webkit-transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
position: absolute;
bottom: 0;
left: 50%;
margin-top: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

This is ok, but on hover the text disappears.
Link to page in private Content

March 26, 2019 at 8:26 am #1082995
Victoria
Inactive Moderator
Hi Niettt,

Please refrain from replying to your own thread because it gets pushed back to the end of the queue and moderators won’t be able to provide a response immediately. Please be patient while we go through the rest of the queue. Thank you for your understanding.

The animation you added works fine, the text does not disappear on my end. But the code should only work on the desktop menu and so you need to wrap it in the media query.
```
@media only screen and (min-width:990px){}
```
Best regards,
Victoria
March 26, 2019 at 9:20 am #1083019

Niettt
Participant

Hei Viktoria,

thanks for your respond.
It works because i set heigt to 10px, but when i change it back to 70px thean text disappears.
Take a look to page now.

March 27, 2019 at 6:48 am #1083445

Niettt
Participant

It’s been past one full day and there’s still no answer. You’ve already responded to everyone except me. I am a very understanding person, but it still takes a bit too long.

March 30, 2019 at 5:10 am #1084783

Rikard
Keymaster

Hi,

Sorry for the late reply. I can’t see the problem on my end, where can we see and reproduce it?

Best regards,
Rikard

March 30, 2019 at 8:19 am #1084830

Niettt
Participant

Hello Rikard,

Thanks for your respond.
I set height back to 70px, now you can see the problem again on mouse hover in menu.
Sorry for my bad english :)

Best regards,
Srecko

April 1, 2019 at 10:21 am #1085398
Rikard
Keymaster
Hi Srecko,

Sorry for the late reply. Please try the following in Quick CSS under Enfold->General Styling:
```
#avia-menu a:hover * {
  color:white !important;
}
```
Best regards,
Rikard
April 1, 2019 at 1:06 pm #1085475

Niettt
Participant

It work only on submenus items.

April 4, 2019 at 4:46 am #1086732
Mike
Moderator
Hi,
Sorry for the late reply, I took a look at your menu on hover when your animation is 70px high so it covers the whole menu item.
you need to add a z-index to your css above and you need to have the menu text change colors on hover, this is the added css that worked for me:
```
#top #header .av-main-nav > li > a:hover .avia-menu-text {
    color: #fff !important;
}
.av-main-nav > li > a:after {
z-index: -1 !important; 
}
```
here is my results:

Please clear your browser cache after you add it and check.

Best regards,
Mike
April 4, 2019 at 8:32 am #1086852

Niettt
Participant

Hi Mike.
Thank’s for you respond.
Your solution works perfectly.
Thank you very much.
What should I change to make the same effect work on Main Menu sublevel Links (By that I mean the entire animation)?
And Is it possible that the same animation works on mobile devices?

Best regards,
Srecko

April 5, 2019 at 3:48 am #1087310
Mike
Moderator
Hi,
To make this animation work on sub-menu links, first please remove the on hover green background, then try this css:
```
.av-main-nav > li > ul.sub-menu > li > a:active:after, .av-main-nav > li > ul.sub-menu > li > a:focus:after, .av-main-nav > li > ul.sub-menu > li > a:hover:after {
    background-color: #719430;
    width: 100%;
    }
    
    #top #header .av-main-nav > li > ul.sub-menu > li > a:hover .avia-menu-text {
        color: #000 !important;
    }
    
    .av-main-nav > li > ul.sub-menu > li > a:after {
    display: inline-block;
    content: "";
    text-indent: -99999px;
    width: 0;
    height: 40px;
    -webkit-transition: all .50s ease-in-out;
    transition: all .50s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1 !important;
    }
```
I think it’s working, but without logging in I can’t check for sure.
As far as getting this to work on mobile, there is no “on hover” for touch screens

Best regards,
Mike
April 5, 2019 at 8:23 am #1087393

Niettt
Participant

Hello Mike

I created acc for you, please log in and check.

April 7, 2019 at 8:23 pm #1088034

Mike
Moderator

Hi,
Thank you for the login, I removed 3 menu color elements in the advanced styling panel and now your animated sub-menus are working.
Please clear your browser cache and check.

Just in case you wanted to know what the colors were in the elements I removed, I’ll post here, but your css seems to be taking care of it:
#719430 bg
#377021 border
#fff menu bg
#000 font color

Best regards,
Mike

April 25, 2019 at 1:08 am #1094223

Niettt
Participant

Hi Mike,
Thanks for your help and sorry for late reply.
Everything work perfect.
You can close topic now.

Best regards,

Srecko

April 25, 2019 at 1:19 am #1094224

Jordan Shannon
Inactive Moderator

Hi,

I’m glad this was resolved. If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon
Author

Posts

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

The topic ‘Menu button animation’ is closed to new replies.