Product Bubbles and Menu Labels in Flatsome Theme

Learn how to setup your own custom product bubbles and menu labels with your own colors and text.

 •

CSS Code

.label-new.menu-item>a:after, .label-hot.menu-item>a:after, .label-sale.menu-item>a:after, .label-popular.menu-item>a:after, .label-custom.menu-item>a:after {
text-transform: uppercase;
font-size: 9px;
font-weight: bolder;
padding: 4px;
border-radius: 2px;
line-height: 12px;
top: 1px;
letter-spacing: 0.05em;
margin-left: 4px;
display: inline-block;
position: relative;
}
.label-new.menu-item>a:after {
content: 'Nieuw' !important; /* Change Text */
background-color: #6168F2;  /* Change BG color */
color: #FFFFFF; /* Change Text color */
}
.label-hot.menu-item>a:after {
content: 'Hot' !important;
background-color: #35CE9D;
color: #FFFFFF;
}
.label-sale.menu-item>a:after {
content: 'Sale' !important;
background-color: #FC6070;
color: #FFFFFF;
}
.label-custom.menu-item > a:after {
content: 'Custom';
background-color: #262626;
color: #FFFFFF;
}

Need a custom design? Hire Seb today

Get the #1 All In One Design Agency for Flatsome

Custom design About us