Glow Hover Nav Links

---

Contents

Copy Code

Copy and paste this code below in the Custom CSS Panel:

Go Pages > Scroll Down to Website Tools > Custom CSS

/* LAZ-I Glow Hover Nav Links */
:root {
  --glow-nav-background-color: #D0EAC8;
  --blur-link-border-radius: 30px;
  --blur-link-opacity: 1;
  --blur-link-strength: 10px;
  --glow-nav-timing: .2s;
}

.header-nav-item,
.header-nav-folder-item,
.header-nav-folder-item-content,
.header-menu-nav-item-content,
.header-actions-action--cart,
.header-actions-action--social a,
.header-menu-actions-action--social a,
.header-menu-nav .unauth,
.header-burger {
  position: relative;
  will-change: transform, background;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.header-nav-item:before,
.header-nav-folder-item-content:before,
.header-menu-nav-item-content:before,
.header-actions-action--cart:before,
.header-actions-action--social a:before,
.header-menu-nav .unauth:before,
.header-menu-actions-action--social a:before,
.header-burger:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  filter: blur(calc(~" ( var(--blur-link-strength) ) - 1px"));
  border-radius: var(--blur-link-border-radius);
  opacity: var(--blur-link-opacity);
  background: rgba(255, 255, 255, 0);
  transition: filter var(--glow-nav-timing), background var(--glow-nav-timing);
}

.header-nav-item:hover:before,
.header-nav-item--active:before,
.header-nav-folder-item--active .header-nav-folder-item-content:before,
.header-nav-folder-item-content:hover:before,
.header-menu-nav-item--active .header-menu-nav-item-content:before,
.header-menu-nav-item:hover .header-menu-nav-item-content:before,
.header-actions-action--cart:hover:before,
.header-actions-action--social a:hover:before,
.header-menu-nav .unauth:hover:before,
.header-menu-actions-action--social a:hover:before,
.header-burger:hover:before,
#cart .header-actions-action--cart:before {
  background: var(--glow-nav-background-color) !important;
  filter: blur(var(--blur-link-strength));
}

.header-menu-nav-item-content,
.header-nav-item a,
.header-nav-folder-item--active span {
  background-image: none !important;
}

.header-nav-folder-content {
  transition: opacity .3s ease;
  z-index: 2;
  background: transparent !important;
}

Customize the Glow Effect

Use the :root variables at the top of the CSS to customize the effect:

• --glow-nav-background-color: Change the hover glow color.

• --blur-link-border-radius: Adjust the roundness of the glow.

• --blur-link-opacity: Set the transparency of the glow.

• --blur-link-strength: Modify the blur intensity.

• --glow-nav-timing: Change the speed of the hover transition.