28 Amazing Navigation Hover Effects for Joomla Website Builder Gridbox

28 Amazing Navigation Hover Effects for Joomla Website Builder Gridbox

Today we would like to share with you tips & tricks for creating attractive navigation. Say hello to a new collection of 28 excellent navigation hover effects for Joomla Website Builder Gridbox. Navigation hover effects it's a creative and fresh solution that will add life to your site and will be interesting for user experience. Easily apply one of effects to your own navigation, modify or just use for inspiration.


Notice!

Presented hover effects for navigation can be applied to Gridbox plugins: Menu and One Page Menu.


View Demo


Step 1: Copy CSS Code.

Copy CSS code and paste to the Gridbox Code Editor.


Gridbox CSS Editor


body:not(.gridbox) .nav-hover-effect .nav.menu > li > a {
    background: none;
    overflow: hidden;
    position: relative;
    transition: none;
}

body:not(.gridbox) .nav-hover-effect .nav.menu > li > a > i,
body:not(.gridbox) .nav-hover-effect .nav.menu > li > a > span {
    z-index: 5;
    position: relative;
    display: block;
}

body:not(.gridbox) .nav-hover-effect .nav.menu > li > a:before,
body:not(.gridbox) .nav-hover-effect .nav.menu > li > a:after {
    border-radius: inherit;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect .nav.menu > li > a:before {
    z-index: 1;
}

body:not(.gridbox) .nav-hover-effect .nav.menu > li > a:after {
    background: var(--button-border-color);
    z-index: 2;
}

Step 2: Copy JavaScript Code.

Copy JavaScript code and paste to the Gridbox Code Editor.


Javascript CSS Editor


jQuery(document).on('ready', function(){
    jQuery('.nav-hover-effect .main-menu .nav.menu > li a').each(function(index, el){
        var elVal = jQuery(el).text();
        jQuery(el).attr('data-hover', elVal);
    });
  jQuery(".nav-hover-effect .main-menu .nav.menu > li a").wrapInner("<span></span>");
 jQuery('.nav-hover-effect .main-menu .nav.menu > li a').each(function(){
      let style = getComputedStyle(this),
          color = style.backgroundColor,
          borderColor = style.borderTopColor;
      this.style.setProperty('--button-background-color', color);
      this.style.setProperty('--button-border-color', borderColor);
    }).on('mouseenter', function(){
        let color = getComputedStyle(this).backgroundColor;
        this.style.setProperty('--button-background-hover', color);
    });
});

Step 3: Copy Class Suffix and CSS Code of Hover Effect.

Copy the CSS code and class suffix of the effect you like. Class Suffix should be placed in the field "Class Suffix" of the Gridbox plugin Menu or One Page Menu. CSS code of the navigation hover effect should be placed to the Gridbox Code Editor.


Javascript CSS Editor


Border Hover Effects

Class Suffix: nav-hover-effect hover-1

body:not(.gridbox) .nav-hover-effect.hover-1 .nav.menu > li > a:after {
    height: 2px;
    top: -2px;
    opacity: 0;  
}

body:not(.gridbox) .nav-hover-effect.hover-1 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-1 .nav.menu > li > a:hover:after {
    top: calc(100% - 2px); 
    opacity: 1;  
}

@keyframes hover-1 {
    0% {transform: translateY(0);}
    25% {transform: translateY(100%);opacity: 0;}
    26% {transform: translateY(-100%);opacity: 0;}
    100% {transform: translateY(0);}
}

body:not(.gridbox) .nav-hover-effect.hover-1 .nav.menu > li.active > a span,
body:not(.gridbox) .nav-hover-effect.hover-1 .nav.menu > li > a:hover span {
    animation: hover-1  .3s  linear both;
}


Class Suffix: nav-hover-effect hover-2

body:not(.gridbox) .nav-hover-effect.hover-2 .nav.menu > li > a:after {
    background: transparent;
    border: 2px solid var(--button-border-color);
    border-left-width: 0;
    border-right-width: 0;
    box-sizing: border-box;
    transform: scaleY(0);
    opacity: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-2 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-2 .nav.menu > li > a:hover:after {
    transform: scaleY(1);  
    opacity: 1;
}


Class Suffix: nav-hover-effect hover-3

body:not(.gridbox) .nav-hover-effect.hover-3 .nav.menu > li > a:after {
    background: transparent;
    border: 2px solid var(--button-border-color);
    border-top-width: 0;
    border-bottom-width: 0;
    box-sizing: border-box;
    transform: scaleX(.5);
    opacity: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-3 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-3 .nav.menu > li > a:hover:after {
    transform: scaleX(1);  
    opacity: 1;
}


Class Suffix: nav-hover-effect hover-4

body:not(.gridbox) .nav-hover-effect.hover-4 .nav.menu > li > a:after {
    background: transparent;
    border-right: 2px solid var(--button-border-color);
    transform: translateX(-101%);
}

body:not(.gridbox) .nav-hover-effect.hover-4 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-4 .nav.menu > li > a:hover:after {
    transform: translateX(0);
} 

@keyframes hover-4 {
    0% {transform: translateY(0);}
    25% {transform: translateX(100%);opacity: 0;}
    26% {transform: translateX(-100%);opacity: 0;}
    100% {transform: translateY(0);}
}

body:not(.gridbox) .nav-hover-effect.hover-4 .nav.menu > li.active > a span,
body:not(.gridbox) .nav-hover-effect.hover-4 .nav.menu > li > a:hover span {
    animation: hover-4 .5s linear both;
}


Class Suffix: nav-hover-effect hover-5

body:not(.gridbox) .nav-hover-effect.hover-5 .nav.menu > li > a:after {
    height: 2px;
    top: calc(50% - 1px);
    transform: scaleX(0);
}

body:not(.gridbox) .nav-hover-effect.hover-5 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-5 .nav.menu > li > a:hover:after {
    transform: scaleX(1);  
}

body:not(.gridbox) .nav-hover-effect.hover-5 .nav.menu > li > a span {
    background: var(--button-background-color);
}


Class Suffix: nav-hover-effect hover-6

body:not(.gridbox) .nav-hover-effect.hover-6 .nav.menu > li > a:after {
    height: 2px;
    top: 0;
    transform: translateX(-101%);
}

body:not(.gridbox) .nav-hover-effect.hover-6 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-6 .nav.menu > li > a:hover:after {
    transform: translateX(0);
    box-shadow: 0px 5px 50px var(--button-border-color); 
}


Class Suffix: nav-hover-effect hover-7

body:not(.gridbox) .nav-hover-effect.hover-7 .nav.menu > li > a:before,
body:not(.gridbox) .nav-hover-effect.hover-7 .nav.menu > li > a:after {
    position: absolute;
    background: transparent;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid var(--button-border-color);
    content: '';
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    transform: translateX(-50%) translateY(-50%) scale(0.2);
}

body:not(.gridbox) .nav-hover-effect.hover-7 .nav.menu > li > a:after {
    border: none;
}

body:not(.gridbox) .nav-hover-effect.hover-7 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-7 .nav.menu > li > a:hover:before {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

body:not(.gridbox) .nav-hover-effect.hover-7 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-7 .nav.menu > li > a:hover:before {
    opacity: .5;
}


Class Suffix: nav-hover-effect hover-8

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a {
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a:before,
body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a:after,
body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a > span:before,
body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a > span:after {
    background: var(--button-border-color);
    content: "";
    position: absolute;
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a:before,
body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a:after {
    top: 0;
    bottom: 0;
    width: 2px;
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a:before {
    left: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a:not(:hover):before {
    transform: translateY(-101%);
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a:after {
    left:calc(100% - 2px) ;
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a:not(:hover):after {
    transform: translateY(101%);    
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a > span:before,
body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a > span:after {
    left: 0;
    right: 0;
    height: 2px;
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a > span:before {
    top: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a:not(:hover) > span:before {
    transform: translateX(-101%);
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a:not(:hover) > span:after {
    transform: translateX(101%);
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a > span:after {
    bottom: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-8 .nav.menu > li > a > span {
    position: static;
}


Class Suffix: nav-hover-effect hover-9

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a {
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a:before,
body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a:after,
body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a > span:before,
body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a > span:after {
    background: var(--button-border-color);
    content: "";
    position: absolute;
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a:before,
body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a:after {
    top: 0;
    bottom: 0;
    width: 2px;
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a:before {
    left: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a:not(:hover):before {
    transform: translateY(101%);
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a:after {
    left:calc(100% - 2px);
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a:not(:hover):after {
    transform: translateY(-101%);    
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a > span:before,
body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a > span:after {
    left: 0;
    right: 0;
    height: 2px;
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a > span:before {
    top: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a:not(:hover) > span:before {
    transform: translateX(-101%);
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a:not(:hover) > span:after {
    transform: translateX(101%);
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu > li > a > span:after {
    bottom: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-9 .nav.menu
> li > a > span {
    position: static;
}


Class Suffix: nav-hover-effect hover-10

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a {
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a:before,
body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a:after,
body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a > span:before,
body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a > span:after {
    background: var(--button-border-color);
    content: "";
    position: absolute;
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a:before,
body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a:after {
    top: 0;
    bottom: 0;
    width: 2px;
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a:before {
    left: 0;
    transition-delay: .3s; 
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a:not(:hover):before {
    transform: translateY(101%);
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a:after {
    left:calc(100% - 2px);
    transition-delay: .3s; 
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a:not(:hover):after {
    transform: translateY(-101%);    
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a > span:before,
body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a > span:after {
    left: 0;
    right: 0;
    height: 2px;
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a > span:before {
    top: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a:not(:hover) > span:before {
    transform: translateX(-101%);
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a:not(:hover) > span:after {
    transform: translateX(101%);
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a > span:after {
    bottom: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-10 .nav.menu > li > a > span {
    position: static;
}


Class Suffix: nav-hover-effect hover-11

body:not(.gridbox) .nav-hover-effect.hover-11 .nav.menu > li > a {
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-11 .nav.menu > li > a:after,
body:not(.gridbox) .nav-hover-effect.hover-11 .nav.menu > li > a:before {
    background: var(--button-border-color);
    right: auto;
    width: 2px;
}

body:not(.gridbox) .nav-hover-effect.hover-11 .nav.menu > li > a:before {
    left: calc(100% - 2px);
}

body:not(.gridbox) .nav-hover-effect.hover-11 .nav.menu > li > a:hover:before {
    bottom: 50%;
    left: 50%;
    top: calc(-50% + 2px);
    transform: rotate(90deg);
}

body:not(.gridbox) .nav-hover-effect.hover-11 .nav.menu > li > a:hover:after {
    top: 50%;
    left: 50%;
    bottom: calc(-50% + 2px);
    transform: rotate(90deg);
}


Class Suffix: nav-hover-effect hover-12

body:not(.gridbox) .nav-hover-effect.hover-12 .nav.menu > li > a {
    overflow: visible; 
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-12 .nav.menu > li > a:after,
body:not(.gridbox) .nav-hover-effect.hover-12 .nav.menu > li > a:before {
    background: var(--button-border-color);
    bottom: auto;
    height: 2px;
    transition: .3s linear;
}

body:not(.gridbox) .nav-hover-effect.hover-12 .nav.menu > li > a:before {
    top: calc(100% - 2px);
}

body:not(.gridbox) .nav-hover-effect.hover-12 .nav.menu > li > a:hover:before {
    opacity: .2;
    top: calc(50% - 2px);
    transform: rotate(45deg);
}

body:not(.gridbox) .nav-hover-effect.hover-12 .nav.menu > li > a:hover:after {
    opacity: .2;
    top: calc(50% - 2px);
    transform: rotate(-45deg);   
}

Background Hover Effects

Class Suffix: nav-hover-effect hover-13

body:not(.gridbox) .nav-hover-effect.hover-13 .nav.menu > li > a:after {
    background: var(--button-background-color);
}

@keyframes no-effect-13 {
  0% {transform: scaleX(1.05);height: 3.8rem;}
  45% {height: 5px;}
  55% {transform: scaleX(1.05);height: 5px;opacity: 1;}  
  100% {transform: scaleX(0);height: 5px;opacity: .02;}
}

body:not(.gridbox) .nav-hover-effect.hover-13 .nav.menu > li > a:before {
    animation-fill-mode: forwards;
    animation:
no-effect-13 .5s forwards linear;
    background: var(--button-background-hover);
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    pointer-events: none;
    position: absolute;
    transform: scaleX(0);
    width: 100%;
    z-index: 3;
}

@keyframes effect-13 {
  0% {transform: scaleX(0);height: 5px;}
  45% {transform: scaleX(1.05);height: 5px;}
  55% {height: 5px;}
  100% {transform: scaleX(1.05);height: 100%;}
}

body:not(.gridbox) .nav-hover-effect.hover-13 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-13 .nav.menu > li > a:hover:before {
    animation: .5s forwards effect-13 linear;
    animation-fill-mode: forwards;
}


Class Suffix: nav-hover-effect hover-14

body:not(.gridbox) .nav-hover-effect.hover-14 .nav.menu > li > a:before {
    background: var(--button-background-color);    
}

body:not(.gridbox) .nav-hover-effect.hover-14 .nav.menu > li > a:after {
    background: var(--button-background-hover);
    content: "";
    height: 200%;
    left: -100%;
    opacity: .8;
    position: absolute;
    top: -50%;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50%;
} 

body:not(.gridbox) .nav-hover-effect.hover-14 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-14 .nav.menu > li > a:hover:after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}


Class Suffix: nav-hover-effect hover-15

body:not(.gridbox) .nav-hover-effect.hover-15 .nav.menu > li > a:before {
    background: var(--button-background-color);    
}

body:not(.gridbox) .nav-hover-effect.hover-15 .nav.menu > li > a:after {
    background: var(--button-background-hover);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skewX(35deg) scaleX(1.5) translateX(-100%);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 100%;
} 

body:not(.gridbox) .nav-hover-effect.hover-15 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-15 .nav.menu > li > a:hover:after {
    transform: skewX(35deg) scaleX(1.5) translateX(0);
}


Class Suffix: nav-hover-effect hover-16

body:not(.gridbox) .nav-hover-effect.hover-16 .nav.menu > li > a:before {
    background: var(--button-background-hover);
}

body:not(.gridbox) .nav-hover-effect.hover-16 .nav.menu > li > a:after {
    background: var(--button-background-color);  
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skewX(35deg) scaleX(1.5) translateX(0);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 100%;
} 

body:not(.gridbox) .nav-hover-effect.hover-16 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-16 .nav.menu > li > a:hover:after {
    transform: skewX(35deg) scaleX(0) translateX(0);
}

3D Hover Effects

Class Suffix: nav-hover-effect hover-17

body:not(.gridbox) .nav-hover-effect.hover-17 .nav.menu > li {
    perspective: 1000px;
}

body:not(.gridbox) .nav-hover-effect.hover-17 .nav.menu > li > a {
    display: inline-block;
    overflow: visible; 
    position: relative;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    transition: transform 0.3s;
}

body:not(.gridbox) .nav-hover-effect.hover-17 .nav.menu > li > a:after {
    background: var(--button-background-color);    
} 

body:not(.gridbox) .nav-hover-effect.hover-17 .nav.menu > li > a:before {
    align-items: center;
    backface-visibility: hidden;
    background: var(--button-background-color);
    content: attr(data-hover);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 100%;
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    transition: background 0.3s;
    width: 100%;
}

body:not(.gridbox) .nav-hover-effect.hover-17 .nav.menu > li.active > a,
body:not(.gridbox) .nav-hover-effect.hover-17 .nav.menu > li:hover > a {
    transform: rotateX(90deg) translateY(-22px);
}

body:not(.gridbox) .nav-hover-effect.hover-17 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-17 .nav.menu > li:hover > a:before {
    background: v
ar(--button-background-hover);    
}


Class Suffix: nav-hover-effect hover-18

body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li {
    perspective: 1000px;
}

body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li > a {
    display: inline-block;
    overflow: visible; 
    position: relative;
    transform-origin: 50% 0;
    transform: rotateX(90deg) translateY(-22px);
    transform-style: preserve-3d;
    transition: transform 0.3s;
}

body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li.active > a,
body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li:hover > a {
    transform: rotateX(0deg) translateY(0);
}

body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li > a:after {
    background: var(--button-background-hover);     
} 

body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li > a:before {
    align-items: center;
    backface-visibility: hidden;
    background: var(--button-background-color);
    content: attr(data-hover);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 100%;
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    transition: background 0.3s;
    width: 100%;
}

body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li:hover > a:before {
    background: var(--button-background-color);
}


Class Suffix: nav-hover-effect hover-19

body:not(.gridbox) .nav-hover-effect.hover-19 .nav.menu > li {
    perspective: 800px;
}

body:not(.gridbox) .nav-hover-effect.hover-19 .nav.menu > li > a {
    backface-visibility: hidden;
    display: inline-block;
    position: relative;
    overflow: visible;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}

body:not(.gridbox) .nav-hover-effect.hover-19 .nav.menu > li > a:before {
    align-items: center;
    background: var(--button-background-hover);
    content: attr(data-hover);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    transform: rotateY(0);
    transition: transform 0.6s;
    width: 100%;
}

body:not(.gridbox) .nav-hover-effect.hover-19 .nav.menu > li > a:after {
    background: var(--button-background-color);
}

body:not(.gridbox) .nav-hover-effect.hover-19 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-19 .nav.menu > li:hover > a:before {
    transform: rotateY(360deg);
    z-index: 5;
}


Class Suffix: nav-hover-effect hover-20

body:not(.gridbox) .nav-hover-effect.hover-20 .nav.menu > li {
    perspective: 800px;
}

body:not(.gridbox) .nav-hover-effect.hover-20 .nav.menu > li > a {
    backface-visibility: hidden;
    display: inline-block;
    position: relative;
    overflow: visible;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}

body:not(.gridbox) .nav-hover-effect.hover-20 .nav.menu > li > a:before {
    align-items: center;
    background: var(--button-background-hover);
    content: attr(data-hover);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    transform: rotateX(270deg);
    transition: transform 0.6s;
    width: 100%;
}

body:not(.gridbox) .nav-hover-effect.hover-20 .nav.menu > li > a:after {
    background: var(--button-background-color);
}

body:not(.gridbox) .nav-hover-effect.hover-20 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-20 .nav.menu > li:hover > a:before {
    transform: rotateX(10deg);
}


Class Suffix: nav-hover-effect hover-21

body:not(.gridbox) .nav-hover-effect.hover-21 .nav.menu > li > a:before {
    background: var(--button-background-hover);
}

body:not(.gridbox) .nav-hover-effect.hover-21 .nav.menu > li > a:after {
    background: var(--button-background-color);
} 

body:not(.gridbox) .nav-hover-effect.hover-21 .nav.menu > li > a:hover:after,
body:not(.gridbox) .nav-hover-effect.hover-21 .nav.menu > li.active > a:after {
    opacity: 0;
}

@keyframes hover-21 {
    50% {transform:
translateX(3px) rotate(2deg);}
    100% {transform: translateX(-3px) rotate(-2deg);}
}

body:not(.gridbox) .nav-hover-effect.hover-21 .nav.menu > li > a:hover {
    animation: hover-21 .15s linear infinite;
}


Class Suffix: nav-hover-effect hover-22

@keyframes hover-22 {
    0% {transform: rotate(0deg) translate3d(0, 0, 0);}
    25% {transform: rotate(3deg) translate3d(0, 0, 0);}
    50% {transform: rotate(-3deg) translate3d(0, 0, 0);}
    75% {transform: rotate(1deg) translate3d(0, 0, 0);}
    100% {transform: rotate(0deg) translate3d(0, 0, 0);}
}

body:not(.gridbox) .nav-hover-effect.hover-22 .nav.menu > li > a:hover {
    animation: hover-22 0.7s ease-in-out both;
}

@keyframes effect-22 {
    0% {transform: translate3d(0, 0, 0) translateZ(0);}
    25% {transform: translate3d(4px, 0, 0) translateZ(0);}
    50% {transform: translate3d(-3px, 0, 0) translateZ(0);}
    75% {transform: translate3d(2px, 0, 0) translateZ(0);}
    100% {transform: translate3d(0, 0, 0) translateZ(0);}
}

body:not(.gridbox) .nav-hover-effect.hover-22 .nav.menu > li > a:hover span {
    animation: effect-22 0.7s ease-in-out both;
    animation-delay: 0.06s;
}

body:not(.gridbox) .nav-hover-effect.hover-22 .nav.menu > li > a:before {
    background: var(--button-background-hover);
}

body:not(.gridbox) .nav-hover-effect.hover-22 .nav.menu > li > a:after {
    background: var(--button-background-color);
} 

body:not(.gridbox) .nav-hover-effect.hover-22 .nav.menu > li > a:hover:after {
    opacity: 0;
}


Class Suffix: nav-hover-effect hover-23

@keyframes hover-23 {
    0% {transform: rotateX(0deg) translate3d(0, 0, 0);}
    25% {transform: rotateX(20deg) translate3d(0, 0, 0);}
    50% {transform: rotateX(-15deg) translate3d(0, 0, 0);}
    75% {transform: rotateX(15deg) translate3d(0, 0, 0);}
    100% {transform: rotateX(0deg) translate3d(0, 0, 0);}
}

body:not(.gridbox) .nav-hover-effect.hover-23 .nav.menu > li > a:hover {
    animation: hover-23 0.7s ease-in-out both;
}

@keyframes effect-23 {
    0% {transform: translate3d(0, 0, 0) translateZ(0);}
    25% {transform: translate3d(0, 5px, 0) translateZ(0);}
    50% {transform: translate3d(0, -9px, 0) translateZ(0);}
    75% {transform: translate3d(0, 2px, 0) translateZ(0);}
    100% {transform: translate3d(0, 0, 0) translateZ(0);}
}

body:not(.gridbox) .nav-hover-effect.hover-23 .nav.menu > li > a:hover span {
    animation: effect-23 0.7s ease-in-out both;
    animation-delay: 0.06s;
}

body:not(.gridbox) .nav-hover-effect.hover-23 .nav.menu > li > a:before {
    background: var(--button-background-hover);
}

body:not(.gridbox) .nav-hover-effect.hover-23 .nav.menu > li > a:after {
    background: var(--button-background-color);
} 

body:not(.gridbox) .nav-hover-effect.hover-23 .nav.menu > li > a:hover:after {
    opacity: 0;
}

Shadow Hover Effects

Class Suffix: nav-hover-effect hover-24

body:not(.gridbox) .nav-hover-effect.hover-24 .nav.menu > li > a {
    overflow: visible; 
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-24 .nav.menu > li > a:after {
    display: none;
} 

body:not(.gridbox) .nav-hover-effect.hover-24 .nav.menu > li.active > a,
body:not(.gridbox) .nav-hover-effect.hover-24 .nav.menu > li > a:hover {
    transform: translateY(-5px);
}

body:not(.gridbox) .nav-hover-effect.hover-24 .nav.menu > li > a:before {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    content: '';
    height: 10px;
    left: 5%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transition: 0.3s;
    width: 90%;
}

body:not(.gridbox) .nav-hover-effect.hover-24 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-24 .nav.menu > li > a:hover:before {   
    opacity: 1;
    transform: translateY(5px);
}


Class Suffix: nav-hover-effect hover-25

body:not(.gridbox) .nav-hover-effect.hover-25 .nav.menu > li > a {
    overflow: visible; 
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-25 .nav.menu > li > a:before,
body:not(.gridbox) .nav-hover-effect.hover-25 .nav.menu > li > a:after {
    pointer-events: none;
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
box-sizing: border-box;
    background-repeat: no-repeat;
    height: 5px;
    opacity: 0;
    transition: 0.3s;
}

body:not(.gridbox) .nav-hover-effect.hover-25 .nav.menu > li > a:before {
    bottom: 100%;
    top: auto;
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 80%);
}

body:not(.gridbox) .nav-hover-effect.hover-25 .nav.menu > li > a:after {
    top: 100%;
    bottom: auto;
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 80%);
}

body:not(.gridbox) .nav-hover-effect.hover-25 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-25 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-25 .nav.menu > li > a:hover:before,
body:not(.gridbox) .nav-hover-effect.hover-25 .nav.menu > li > a:hover:after {
    opacity: 1;
}

Text Hover Effects

Class Suffix: nav-hover-effect hover-26

body:not(.gridbox) .nav-hover-effect.hover-26 .nav.menu > li > a > span {
    transition: .3s;
}

body:not(.gridbox) .nav-hover-effect.hover-26 .nav.menu > li > a:after {
    align-items: center;
    background: transparent;
    content: attr(data-hover);
    display: flex;
    font-weight: bold;
    justify-content: center;
    transform: translateY(50%);
    opacity: 0;
}

body:not(.gridbox) .nav-hover-effect.hover-26 .nav.menu > li.active > a:after,
body:not(.gridbox) .nav-hover-effect.hover-26 .nav.menu > li > a:hover:after {
    transform: translateY(0%);
    opacity: 1;
}

body:not(.gridbox) .nav-hover-effect.hover-26 .nav.menu > li.active > a span,
body:not(.gridbox) .nav-hover-effect.hover-26 .nav.menu > li > a:hover span {
    transform: translateY(-100%);
    opacity: 0;
}


Class Suffix: nav-hover-effect hover-27

body:not(.gridbox) .nav-hover-effect.hover-27 .nav.menu > li > a:after {
    display: none;
}

body:not(.gridbox) .nav-hover-effect.hover-27 .nav.menu > li > a:before {
    align-items: center;
    content: attr(data-hover);
    display: flex;
    justify-content: center;
    position: absolute;
    transition: transform 0.3s, opacity 0.3s;
    transform: scale(2);
    opacity: 0;
    pointer-events: none;
}

body:not(.gridbox) .nav-hover-effect.hover-27 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-27 .nav.menu > li > a:hover:before {
    transform: scale(1);
    opacity: 1;
}


Class Suffix: nav-hover-effect hover-28

body:not(.gridbox) .nav-hover-effect.hover-28 .nav.menu > li > a:after {
    display: none;
}

body:not(.gridbox) .nav-hover-effect.hover-28 .nav.menu > li > a:before {
    align-items: center;
    content: attr(data-hover);
    display: flex;
    justify-content: center;
    position: absolute;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
    pointer-events: none;
}

@keyframes hover-28 {
    0% {transform: scale(1);}
    50% {transform: scale(1.3);}
    100% {transform: scale(1);}
}

body:not(.gridbox) .nav-hover-effect.hover-28 .nav.menu > li > a:hover:before {
    animation: hover-28 .5s linear infinite;
    opacity: 1;
}

body:not(.gridbox) .nav-hover-effect.hover-28 .nav.menu > li.active > a span,
body:not(.gridbox) .nav-hover-effect.hover-28 .nav.menu > li > a:hover span {
    opacity: 0;
}

Step 4: Save and Check.

Save changes. Clear your browser cache and look results on the frontend.


Notice!

Naxigation Hover Effects will be displayed only on the frontend. Changes will not be visible in the Gridbox Editor.