Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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.
Hi @sim25ecom, please share your store URL so that I can write the CSS code for you.
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?
But you can access with password if you want: https://schwarzwaldcosmetics.myshopify.com/
Password: nauthi
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.
That works great. Thank you so much!
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?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025