Return to previous page

Hover animation in your theme to my theme.

This topic has 18 replies, 3 voices, and was last updated 2 years, 9 months ago ago by Rose Tyler

filmguerilla

Participant

June 23, 2021 at 05:32

Checking this demo https://xstore.8theme.com/elementor/demos/digital-marketing/

Found that the hover animation in the footer nav are possible. I have this hover animation on my header nav. Is it possible to make this on my footer nav as well?

#291725 Copied Theme version: 7.2.8 WooCommerce version: 5.3.0

17 Answers
Rose Tyler

Support staff

June 23, 2021 at 06:57
Hello,

Try to use the next custom CSS code:
```
.footer .menu-element .menu li > a:before {
    content: '';
    height: 2px;
    width: 0;
    right: 0;
    position: absolute;
    transition: width .2s ease-in-out;
    bottom: 0;
    background: currentColor;
}
.footer .menu-element .menu li > a:hover:before {
    width: 65%;
    right: auto;
}
```
Regards
#291726 Copied
filmguerilla

Participant

June 23, 2021 at 12:51

added it to custom css global. with minimal problem

desktop view. http://prntscr.com/16g0utr
tablet view: http://prntscr.com/16g1093
phone view: http://prntscr.com/16g14p5

Is it possible to have the line only on the length of the text?

#291791 Copied
Rose Tyler

Support staff

June 23, 2021 at 13:14
Hello,

Change the code to:
```
.footer .menu-element .menu li > a {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.footer .menu-element .menu li {
    margin-left: 1.07em !important;
    margin-right: 1.07em !important;
}
.footer .menu-element .menu li > a:before {
    content: '';
    height: 2px;
    width: 0;
    right: 0;
    position: absolute;
    transition: width .2s ease-in-out;
    bottom: 0;
    background: currentColor;
}
.footer .menu-element .menu li > a:hover:before {
    width: 100%;
    right: auto;
}
```
Regards
#291795 Copied
filmguerilla

Participant

June 23, 2021 at 13:38

Hi, this doesn’t work. makes the lines longer with other texts..

#291797 Copied
Olga Barlow

Support staff

June 23, 2021 at 15:05
Hello,

Find the below custom
```
footer .elementor-widget-wp-widget-etheme-menu .menu-element.horizontal .menu>li {
    display: flex;
    flex-direction: column;
    align-items: center;
}
```
and replace with
```
footer .elementor-widget-wp-widget-etheme-menu .menu-element.horizontal .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}
```
Check the items after that.

Regards
#291809 Copied
filmguerilla

Participant

June 23, 2021 at 16:11

hi i think i need to clear cahe again. !the first code looks working. let me check on chrome and firefox again. thank a lot for the help

#291813 Copied

Olga Barlow

Support staff

June 23, 2021 at 20:12

Hello,

You are welcome.

Regards

#291831 Copied

filmguerilla

Participant

June 26, 2021 at 13:36

hello guys,

just an update.. i found out that this code works on desktop. but the hover animation on table/phone are longer than the text… this is the code i have right now..

/* Footer Hover Nav */

.footer .menu-element .menu li > a {
padding-left: 0px !important;
padding-right: 0px !important;
}
.footer .menu-element .menu li {
margin-left: 1.07em !important;
margin-right: 1.07em !important;
}
.footer .menu-element .menu li > a:before {
content: ”;
height: 2px;
width: 0;
right: 0;
position: absolute;
transition: width .2s ease-in-out;
bottom: 0;
background: currentColor;
}
.footer .menu-element .menu li > a:hover:before {
width: 100%;
right: auto;
}

#292202 Copied

Rose Tyler

Support staff

June 26, 2021 at 13:58

Hello,

Please delete right: auto; from the code – https://gyazo.com/3e99a59b55312d2276ad9f7240ae12c0

Regards

#292204 Copied

filmguerilla

Participant

June 27, 2021 at 08:40

Hello,

tested it.. Please check. http://prntscr.com/17209go

Is it possible to have the lines same as the main nav? lines is same length with the text?

desktop view http://prntscr.com/1720nqu

#292240 Copied

Rose Tyler

Support staff

June 27, 2021 at 09:15

Hello,

Like this https://gyazo.com/f05ba7b6b28ed432caac5c3e69dfd86a ?
Provide temporary wp-admin access, please.

Regards

#292245 Copied

filmguerilla

Participant

June 28, 2021 at 01:44

Yes!!! Please check private content

THANK YOU!

Please contact administrator
for this information.

#292277 Copied

Rose Tyler

Support staff

June 28, 2021 at 08:20

Hello,

Check now.

Regards

#292298 Copied

filmguerilla

Participant

June 28, 2021 at 14:21

Hi, the hover was fixed. But the nav was changed again on tablet and phone view..

http://prntscr.com/17aacmc

Was supposed to be collapsed. on table and phone view. http://prntscr.com/17abdps

Thanks

#292344 Copied
Olga Barlow

Support staff

June 29, 2021 at 10:05
Hello,

I added the code that I provided you few messages ago for the mobile devices
```
footer .elementor-widget-wp-widget-etheme-menu .menu-element.horizontal .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}
```
and everything looks ok. Check, please.

Regards
#292411 Copied
filmguerilla

Participant

July 3, 2021 at 10:44

Thank you i think this is fine now. will double check again.

#292943 Copied

Rose Tyler

Support staff

July 3, 2021 at 10:56

Hello,

You’re welcome!

Regards

#292944 Copied
Viewing 18 results - 1 through 18 (of 18 total)