.menu-label remove tail

Hey there

Been testing & adjusting the menu label & could not find the piece of code where I can turn this message bubble into a pill. Can you help a brother out? 🙌

See attached images. The first one is my own code, the second is an example of what I want it transformed into.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the delay, please provide the page URL and I will give custom CSS to do this.

Best Regards

[Stefan]

See Private Content

• This reply was modified 2 years, 10 months ago by Stefan.

Hello,

If you want to get the rectangular label, remove this line from the Appearance > Customize > Additional CSS: https://gyazo.com/287abb31a16eb827a84c3aa8616be70e

We recommend moving all the CSS into the Theme Settings > Custom CSS. In this case, the styles would not be lost during the update.

Best Regards

I think you’ve misunderstood me – I rounded the corners myself.

I want to turn the speech bubble into a pill label. See attached photoshopped image.

Attachments:

You must be logged in to view attached files.

[Stefan]

After hunting code I found the piece of the puzzle. This will align the label side by side with the link.

.wd-sub-menu li a .menu-label {
	align-self: center;
	margin-top: -5px !important;
	margin-left: 5px;
        padding: 3px 9px;
	border-radius: 50px;
	line-height: 12px;
}	
.menu-label:before {
	border-right-width: 0;
}

• This reply was modified 2 years, 10 months ago by Stefan.

Attachments:

You must be logged in to view attached files.

Hello,

Now I see, we are glad you have found the proper code.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts