Solved

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

sim25ecom
Shopify Partner
13 0 3

Bildschirmfoto 2023-12-11 um 17.00.21.png

 

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!

Accepted Solution (1)
KabirDev
Shopify Partner
248 61 67

This is an 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.

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com

View solution in original post

Replies 6 (6)

KabirDev
Shopify Partner
248 61 67

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

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
sim25ecom
Shopify Partner
13 0 3

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
Shopify Partner
13 0 3

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

 

Password: nauthi

KabirDev
Shopify Partner
248 61 67

This is an 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.

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
sim25ecom
Shopify Partner
13 0 3

That works great. Thank you so much!

sim25ecom
Shopify Partner
13 0 3

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? image_6487327 (2).JPG