Color of Menu items | Kidzy - Documentation | JoomShaper

Kidzy

Updated Last: 08 February 2023

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;
}