Badge to another position possible?

chief_2023 · Jul 26, 2023

Hello together,

First of all, English is not my mother tongue. I hope I didn't miss a post with this topic.

I have set a badge-new in t4_bs5_blank in the megamenu. Is it possible to set a badge in the build mega menu?

Kind regards from your Chief

dominic · Jul 27, 2023

Hi chief_2023,
You can add the following class to the Backend > Menus > Menu items > Link Type.

Then add the following CSS code to the Backend > Systems >Site Template Styles > JA template default >Tools > Custom CSS code.

a.item-has-badge span {
position: relative;
}
a.item-has-badge span:after {
    content: "Default Badge";
    position: absolute;
    right: -32px;
    top: -10px;
    background: #438593;
    color: #fff;
    text-transform: uppercase;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 3px;
}

a.item-has-badge.cto-badge-hot span:after {
    content: "hot";
    background: #438593;
}

Hope this helps!

chief_2023 · Jul 27, 2023

Hello Dominic,

Thank you for your quick reply. I will try it over the weekend and then say if it worked.
Otherwise I will contact you again.

I had an appointment cancellation and therefore some time.

I have pasted your code, but unfortunately it does not work.
I post here now all the code I use for the badge. My "old" code with language translation, color background and size. I have also adapted yours.
Have I made a mistake?

`/* Bagde deutscher Text und neue Farbe | German language and new color */

.t4-megamenu .badge-new>.nav-link:after {
background-color: #ff460a;
content: "Neues"
}

/* Schriftgröße Badge ändern | New font size*/

.t4-megamenu .badge-hot>.nav-link:after,.t4-megamenu .badge-new>.nav-link:after,.t4-megamenu .badge-popular>.nav-link:after {
font-size: 12px;
}

/* Untermenü Badge | Code Domenic */

a.item-has-badge span {
position: relative;
}
a.item-has-badge span:after {
content: "Default Badge";
position: absolute;
right: -32px;
top: -10px;
background: #ff460a;
color: #fff;
text-transform: uppercase;
font-size: 9px;
padding: 1px 6px;
border-radius: 3px;
}

a.item-has-badge.cto-badge-hot span:after {
content: "Neues";
background: #ff460a;
}
`

Kind regards from your Chief

dominic · Jul 28, 2023

Hi chief_2023,
You should change the class from: cto-badge-hot to cto-badge-neues:

a.item-has-badge.cto-badge-neues span:after {
content: "Neues";
background: #ff460a;
}

chief_2023 · Jul 28, 2023

dominic

Thank you for your correction. It works! Now I can enjoy the weekend.
I wish you a nice weekend as well.

If there are any problems again, I will get back to you.

Kind regards from Chief