Skip to content

Instantly share code, notes, and snippets.

@muks999
Created January 11, 2019 23:32
Show Gist options
  • Save muks999/f9b02c49dbe725e1968b954810c54a97 to your computer and use it in GitHub Desktop.
Save muks999/f9b02c49dbe725e1968b954810c54a97 to your computer and use it in GitHub Desktop.
DIVI menu animations
/*Grow Underline*/
#top-menu a {
display: block;
position: relative;
color: rgba(231, 13, 13, 0.89);
text-decoration: none;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.divi-hacks-animenu-2 #top-menu li:not(.menu-item-has-children):not(.current_page_item):hover a {
box-shadow:0px 5px 0px 0px inherit;
}
/*Slide-in Underline*/
.divi-hacks-animenu-1 #top-menu > li:before, .divi-hacks-animenu-2 #top-menu li.current_page_item > a, .divi-hacks-animenu-2 .et-fixed-header #top-menu li.current_page_item > a, .divi-hacks-animenu-3 #top-menu > li.page_item::before {
border-color: inherit;
border-top-color: inherit;
border-right-color: inherit;
border-bottom-color: inherit;
border-left-color: inherit;
}
.divi-hacks-animenu-1 #top-menu > li::before {
content: "";
position: absolute;
z-index: -2;
left: 0px;
right: 100%;
bottom: 20%;
height: 3px;
transition-property: right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
background: transparent;
border-bottom: 3px solid;
}
/*Current Page overline */
.divi-hacks-animenu-3 #top-menu > li.page_item::before {
height: 5px;
content: "";
width: 100%;
left: 0;
top: -15px;
position: absolute;
background: transparent;
border-top-width: 5px;
border-top-style: solid;
opacity: 1;
animation: grow 0.5s;
}
/*Main Header Gradient */
#main-header:before {
background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%) !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%) !important;
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0,0,0,0)', endColorstr='rgba(0,0,0,0)',GradientType=1 ) !important;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
z-index: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment