adding a badge (e.g. "new") to a menu-item

Marco
171 Posts
Marco posted this 24 July 2016

Is it possible (with custom css) to add a badge like "new" to a Menu-Item?
How?

Is it possible (with custom css) to add a badge like "new" to a Menu-Item? How?
Vote to pay developers attention to this features or issue.
6 Comments
Order By: Standard | Newest
Marco
171 Posts
Marco posted this 24 July 2016

Like you have on top in your menu: "Get Ideas" -> "Daily"...

Like you have on top in your menu: "Get Ideas" -> "Daily"...
Support Team
Support Team posted this 25 July 2016

Hi,

Yes, it's possible with the following CSS:

.bd-menuitem-11 span:after {
    content: 'Daily';
    font-size: 8px;
    vertical-align: top;
    color: red;
}

Instead of the first class name use the unique menu item name.

Sincerely,
Hella

Hi, Yes, it's possible with the following CSS: .bd-menuitem-11 span:after { content: 'Daily'; font-size: 8px; vertical-align: top; color: red; } Instead of the first class name use the unique menu item name. Sincerely, Hella
Marco
171 Posts
Marco posted this 25 July 2016

thanks for the hint.
Using this works now perfectly for me:

.menubadge span::after {
color: #d4524e;
content: " in Kürze!";
font-size: 9px;
font-style: italic;
position: relative;
top: -5px;

}

thanks for the hint. Using this works now perfectly for me: .menubadge span::after { color: #d4524e; content: " in Kürze!"; font-size: 9px; font-style: italic; position: relative; top: -5px; }
Support Team
Support Team posted this 25 July 2016

You are welcome.
Feel free to contact us in any other occasion.

Sincerely,
Hella

You are welcome. Feel free to contact us in any other occasion. Sincerely, Hella
Marco
171 Posts
Marco posted this 11 May 2017

Hey, me again ;)
How can I make the badge in 35 ° inclination ?

Hey, me again ;) How can I make the badge in 35 ° inclination ?
Support Team
Support Team posted this 12 May 2017

Hi,

Please try css 3 rotate transformation:
https://www.w3schools.com/cssref/css3_pr_transform.asp

It should help.

Thank you,
Olivia

Hi, Please try css 3 rotate transformation: https://www.w3schools.com/cssref/css3_pr_transform.asp It should help. Thank you, Olivia
You must log in or register to leave comments