24 Navigation Hover Animations

Basic plugin configuration

Go to Plugin Settings ➝ Design ➝ Border ➝ Enable all borders. Border width set to 0.

Adding basic CSS code

1. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

body:not(.gridbox) .nav-hover-effect .nav.menu > li > a {
    background: none;
    overflow: hidden;
    position: relative;
    transition: none !important;
}
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 !important;
}
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;
}

Adding basic JavaScript code

2. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

document.addEventListener('DOMContentLoaded', () => {
    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);
    });
});

Adding CSS class suffix

3. Copy CSS class suffix from the demo, go to Item Settings ➝ General ➝ Advanced ➝ Class Suffix and paste it.

Adding CSS

4. Copy CSS from the demo, go to Tools ➝ Code Editor ➝ CSS and paste it.