How to add a badge to a menu item with sub menus?

Store Design
, ,
1

I used this code to add a badge, it worked well when the menu item does not have sub menus and it is not working now when I added sub menus under the menu item “Trending”.

a[href=“/collections/trending”] {
position: relative;
display: inline-flex;
}
a[href=“/collections/trending”]::before {content: ‘Soon!’;position: absolute;background: blue;transform: translate(-50%, -50%);padding: 1px 5px;color: white;font-size: 12px;left: 50%;top: 0px;}

a[href=“/collections/trending”]::after {content: ‘’;width: 5px;height: 5px;position: absolute;background: blue;transform: translate(-50%, -50%) rotate(45deg);left: 50%;top: 8px;}

any help?

2

most likely its because the position changes when you have a sub menu. I would google submenus with icons to get a good hint code wise. its impossible to say without your full site/code