GeneratePress Navigation Effects

gp-nav-effects

/* rising underline on hover */

@media (min-width: 769px) {
  .main-navigation .main-nav ul li > a {
    box-shadow: 0 -4px 0px #0088ff inset;
    padding-bottom: 2px;
    transition: all 300ms ease-in-out;
    margin: 0 30px;
  }
}

.main-navigation .main-nav ul li:hover > a {
  box-shadow: 0 -12px 0px #0088ff inset;
}


/* horizontal rule on hover */

@media (min-width: 769px) {
  .main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -20px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px;
    background-color: #ff00e6;
    transition: all 300ms ease-in-out;
  }
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after {
  width: 40px;
}


/* navigation lift on hover */

@media (min-width: 769px) {
  .main-navigation .main-nav ul li > a {
    transition: all 300ms ease-in-out;
  }
}

.main-navigation .main-nav ul li:hover > a {
  transform: translate3d(0, -3px, 0);
}


/* vertical rule on hover */

@media (min-width: 769px) {
  .main-navigation .main-nav > ul > li > a:before {
    position: absolute;
    content: "";
    width: 2px;
    height: 0;
    background-color: #b200d5;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    transition: all 300ms ease-in-out;
  }

  .main-navigation .main-nav > ul > li:hover > a:before {
    height: 40px;
  }

  .main-navigation .main-nav > ul > li.current-menu-item > a:before {
    height: 40px;
    width: 2px;
  }
}


/* gradient hover effect */

@media (min-width: 769px) {
  .main-navigation .main-nav ul li {
    margin: 10px;
  }
}

.main-navigation .main-nav ul li a {
  --gradX: 0;
  background: #ff00e6;
  background: linear-gradient(120deg, #ff00e6, #b200d5 51%, #ff00e6)
    var(--gradX, 0) / 200%;
  transition: all 300ms ease-in-out;
  border-radius: 4px;
}

.main-navigation .main-nav ul li:hover a {
  --gradX: 100%;
}