Color of Menu items | Kidzy - Documentation | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Kidzy

Updated Last: 22 November 2024

Color of Menu items

Beautiful colorful menu items are only in 1st preset (preset1.css).

But you can easily use inside your custom.css file or CSS custom field to use it in any color preset you need:

.sp-megamenu-parent >li:nth-child(n) > a {
  color: #8ac53f;
}
.sp-megamenu-parent >li:nth-child(n) > a:before {
  color: #8ac53f;
}
.sp-megamenu-parent >li:nth-child(n) .sp-dropdown li.sp-menu-item.active>a:not(.sp-group-title),
.sp-megamenu-parent >li:nth-child(n) .sp-dropdown li.sp-menu-item >a:focus,
.sp-megamenu-parent >li:nth-child(n) .sp-dropdown li.sp-menu-item >a:hover {
  background-color: #8ac53f;
}
.sp-megamenu-parent >li:nth-child(2n) > a {
  color: #2ab0ba;
}
.sp-megamenu-parent >li:nth-child(2n) > a:before {
  color: #2ab0ba;
}
.sp-megamenu-parent >li:nth-child(2n) .sp-dropdown li.sp-menu-item.active>a:not(.sp-group-title),
.sp-megamenu-parent >li:nth-child(2n) .sp-dropdown li.sp-menu-item >a:focus,
.sp-megamenu-parent >li:nth-child(2n) .sp-dropdown li.sp-menu-item >a:hover {
  background-color: #2ab0ba;
}
.sp-megamenu-parent >li:nth-child(3n) > a {
  color: #f1c712;
}
.sp-megamenu-parent >li:nth-child(3n) > a:before {
  color: #f1c712;
}
.sp-megamenu-parent >li:nth-child(3n) .sp-dropdown li.sp-menu-item.active>a:not(.sp-group-title),
.sp-megamenu-parent >li:nth-child(3n) .sp-dropdown li.sp-menu-item >a:focus,
.sp-megamenu-parent >li:nth-child(3n) .sp-dropdown li.sp-menu-item >a:hover {
  background-color: #f1c712;
}
.sp-megamenu-parent >li:nth-child(4n) > a {
  color: #ed117d;
}
.sp-megamenu-parent >li:nth-child(4n) > a:before {
  color: #ed117d;
}
.sp-megamenu-parent >li:nth-child(4n) .sp-dropdown li.sp-menu-item.active>a:not(.sp-group-title),
.sp-megamenu-parent >li:nth-child(4n) .sp-dropdown li.sp-menu-item >a:focus,
.sp-megamenu-parent >li:nth-child(4n) .sp-dropdown li.sp-menu-item >a:hover {
  background-color: #ed117d;
}
.sp-megamenu-parent >li:nth-child(5n) > a {
  color: #92278f;
}
.sp-megamenu-parent >li:nth-child(5n) > a:before {
  color: #92278f;
}
.sp-megamenu-parent >li:nth-child(5n) .sp-dropdown li.sp-menu-item.active>a:not(.sp-group-title),
.sp-megamenu-parent >li:nth-child(5n) .sp-dropdown li.sp-menu-item >a:focus,
.sp-megamenu-parent >li:nth-child(5n) .sp-dropdown li.sp-menu-item >a:hover {
  background-color: #92278f;
}
.sp-megamenu-parent >li:nth-child(6n) > a {
  color: #00a651;
}
.sp-megamenu-parent >li:nth-child(6n) > a:before {
  color: #00a651;
}
.sp-megamenu-parent >li:nth-child(6n) .sp-dropdown li.sp-menu-item.active>a:not(.sp-group-title),
.sp-megamenu-parent >li:nth-child(6n) .sp-dropdown li.sp-menu-item >a:focus,
.sp-megamenu-parent >li:nth-child(6n) .sp-dropdown li.sp-menu-item >a:hover {
  background-color: #00a651;
}
.sp-megamenu-parent >li:nth-child(7n) > a {
  color: #00aeef;
}
.sp-megamenu-parent >li:nth-child(7n) > a:before {
  color: #00aeef;
}
.sp-megamenu-parent >li:nth-child(7n) .sp-dropdown li.sp-menu-item.active>a:not(.sp-group-title),
.sp-megamenu-parent >li:nth-child(7n) .sp-dropdown li.sp-menu-item >a:focus,
.sp-megamenu-parent >li:nth-child(7n) .sp-dropdown li.sp-menu-item >a:hover {
  background-color: #00aeef;
}