badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*
View all Themes

Add text bubble above menu link

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 7, 2021 at 5:40 pm #89316
    Mravi
    Participant

    How do i achieve this with?
    https://kepkuldes.com/images/2926218411dfba247c9a4b0f3eff173a.png

    June 7, 2021 at 6:44 pm #89344
    Mravi
    Participant

    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

    June 7, 2021 at 7:06 pm #89347
    Mravi
    Participant

    Good menu:

    1

    the menu will be thicker:

    2

    June 9, 2021 at 8:42 am #89387
    Mravi
    Participant

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

    June 11, 2021 at 2:57 pm #89491
    Theme Horse Support Team
    Keymaster

    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
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.