How can I add a 'SALE' sign over a navigation point with custom code?

[sim25ecom]

I want to add a “SALE“ sign over a navigation point. The shape does not really matter. But it should also be formatted in the mobile menu and fit over it. It can be exactly above a navigation point. Does anyone have a custom code for this and a short guide? 

Grateful for any help!

[KabirDev]

Hi @sim25ecom, please share your store URL so that I can write the CSS code for you.

[sim25ecom]

Thanks for you help mate. Just for the normal dawn theme. The shop is not live yet, because the shop is in the development mode. Is that enough information?

[sim25ecom]

But you can access with password if you want: https://schwarzwaldcosmetics.myshopify.com/

Password: nauthi

[KabirDev · Accepted solution]

Add this code to your theme's CSS file.

ul.list-menu li {
    position: relative;
}
ul.list-menu li:nth-child(2):before {
    content: "Sale";
    background: #f49961;
    color: #fff;
    padding: 2px 5px;
    line-height: 1;
    position: absolute;
    top: -3px;
    right: 0px;
}

You can adjust the code for both mobile and desktop view. I hope it will give you a good start.

[sim25ecom]

That works great. Thank you so much!

[sim25ecom]

The code that you created for me works really well. Thank you so much for that again! Is that possible to change the mobile position over the shop navigation point like in the screenshot here?