Support Forum

Hi Rahim,

Please add below code and add class for menu item like as you did with original menu

.mega-menu li.hot > a:after,
.mega-menu li.sale > a:after,
.mega-menu li.new > a:after {
	position: absolute;
	color: #fff;
	font-size: 9px;
	padding: 1px 7px 0;
	border-radius: 50px;
	right: -28px;
	top: -10px;
	line-height: 16px;
}
.mega-menu ul li.hot > a:after,
.mega-menu ul li.sale > a:after,
.mega-menu ul li.new > a:after {
	right: -3px;
	top: 5px;
}
.mega-menu li.hot > a:after {
	content: 'Hot';
	background: #ff3e11;
}
.mega-menu li.sale > a {
	color: #ec0101;
}
.mega-menu li.sale > a:after {
	content: 'Sale';
	background: #ffa800;
}
.mega-menu li.new > a:after {
	content: 'New';
	background: #01bad4;
}

Best regards

Hi Rahim,

Please add in Claue > Theme Option > General Layout > Custom CSS

Best regards

Hi Rahim,

Sorry for wrong class, please use new code

.mega-menu li.mega-hot > a:after,
.mega-menu li.mega-sale > a:after,
.mega-menu li.mega-new > a:after {
	position: absolute;
	color: #fff;
	font-size: 9px;
	padding: 1px 7px 0;
	border-radius: 50px;
	right: -28px;
	top: -10px;
	line-height: 16px;
}
.mega-menu ul li.mega-hot > a:after,
.mega-menu ul li.mega-sale > a:after,
.mega-menu ul li.mega-new > a:after {
	right: -3px;
	top: 5px;
}
.mega-menu li.mega-hot > a:after {
	content: 'Hot';
	background: #ff3e11;
}
.mega-menu li.mega-sale > a {
	color: #ec0101;
}
.mega-menu li.mega-sale > a:after {
	content: 'Sale';
	background: #ffa800;
}
.mega-menu li.mega-new > a:after {
	content: 'New';
	background: #01bad4;
}

Best regards

Hi Rahim,

Sorry the code of mega menu override my code please use below code

.mega-menu li.mega-hot > a::before, 
.mega-menu li.mega-sale > a::before, 
.mega-menu li.mega-new > a::before {
	position: absolute;
	color: #fff;
	font-size: 9px !important;
	padding: 1px 7px 0;
	border-radius: 3px;
	right: -28px;
	top: -10px;
	line-height: 15px !important;
	bottom: auto;
	left: auto;
font-family: arial, sans-serif;
}
.mega-menu ul li.mega-hot > a:before,
.mega-menu ul li.mega-sale > a:before,
.mega-menu ul li.mega-new > a:before {
	right: -3px;
	top: 5px;
}
.mega-menu li.mega-hot > a:before {
	content: 'Hot';
	background: #ff3e11;
}
.mega-menu li.mega-sale > a {
	color: #ec0101;
}
.mega-menu li.mega-sale > a:before {
	content: 'Sale';
	background: #ffa800;
}
.mega-menu li.mega-new > a:before {
	content: 'New';
	background: #01bad4;
}

Best regards

Hi Rahim,

Please add more code

.rtl #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item a.mega-menu-link::before {
float: left;
}

Best regards

Hi,

We hide badge on mobile because it display not good.

Best regards

Hi Rahim,

Sorry i tried but don’t have solution for this.