[Mravi]

How do i achieve this with?

[Mravi]

Here is the work:

@media (min-width: 992px) {
	.main-navigation a,
	.search-toggle {
		padding-top: 13px;
		padding-bottom: 13px;
	}
	.main-navigation .dropdown-menu a,
	.main-navigation li ul a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.apro-class:after {
		content: "New";
		font-size: 15px;
		color: #FFF;
		background: #029900;
		line-height: 25px;
		width: 25px;
		display: inline-block;
		text-align: center;
		border-radius: 100px;
		position: relative;
		top: -50px;
		left: 190px;
}

But not good yet

[Mravi]

Good menu:

the menu will be thicker:

[Mravi]

Managed to solve:

@media (min-width: 992px) {
.main-navigation a,
.search-toggle {
padding-top: 13px;
padding-bottom: 13px;
}
.main-navigation .dropdown-menu a,
.main-navigation li ul a {
padding-top: 10px;
padding-bottom: 10px;
}
}
.apro-class:after {
content: “New”;
font-size: 15px;
color: #FFF;
background: #029900;
line-height: 30px;
width: 30px;
display: inline-block;
text-align: center;
border-radius: 100px;
position: absolute;
top: -5px;
left: 200px;
}

[Theme Horse Support Team]

Hi Mravi,

Actually it a Menu description but it can be done manually as you have shared. Add unique Class Name to specific menu (like ‘apro-class’ in example) then add the below Custom CSS code to ‘Appearance > Customize > Additional CSS’.

.apro-class > a:before {
	content: "New";
}
.apro-class > a:before {
	position: relative;
	position: absolute;
	top: -8px;
	right: 15px;
	background-color: #a1b32e;
	color: #ffffff;
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: normal;
}

@media (max-width: 991px) {
	.apro-class > a {
		display: flex;
	}
	.apro-class > a:before {
		position: inherit;
		top: auto;
		right: auto;
		-ms-flex-order: 2;
		order: 2;
		padding: 3px 5px;
		margin-left: 8px;
	}
}

If you have to add the bubble to other menu item then you have to repeat the same code adding next unique Class Name to menu.

Thanks

[Author]

Posts