Shopify themes, liquid, logos, and UX
I like to add to my Menu something similar to this:
Thanks in advance!
https://12rsifgo1nt79lud-68796285242.shopifypreview.com
Solved! Go to the solution
This is an accepted solution.
yes, please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
a[href="/collections/on-sale"] {
position: relative;
}
a[href="/collections/on-sale"]::before {content: 'Hot';position: absolute;background: red;transform: translateX(-50%);padding: 3px 10px;z-index: 999;color: white;text-transform: uppercase;font-size: 12px;font-weight: bold;left: 50%;top: -10px;}
This is an accepted solution.
Hello @Andy106 ,
It's GemPages support team and glad to support you today.
I would like to give you the recommendation to support you so kindly follow the steps below:
1. Go to Online Store > Theme > Edit code of your current theme
2. Open your theme.liquid theme file
3. Paste the below code before </head>
<style>
a.header__menu-item.list-menu__item[href="/collections/on-sale"] {
position: relative;
}
a.header__menu-item.list-menu__item[href="/collections/on-sale"]:before {
content: "HOT";
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 0;
font-size: 12px;
background: red;
color: white;
padding: 1px 5px;
}
a.header__menu-item.list-menu__item[href="/collections/on-sale"]:after {
content: "";
width: 5px;
height: 5px;
position: absolute;
background: red;
transform: translate(-50%, -50%) rotate(45deg);
left: 50%;
top: 8px;
}
</style>
For example,
It will look like that:
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
This is an accepted solution.
Hello @Andy106 ,
In order to fix it for mobile, you could please add the below code to before </head> in the theme.liquid file:
<style>
a.menu-drawer__menu-item.list-menu__item[href="/collections/on-sale"] {
position: relative;
display: inline-flex;
}
a.menu-drawer__menu-item.list-menu__item[href="/collections/on-sale"]:before {
content: "HOT";
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 0;
font-size: 12px;
background: red;
color: white;
padding: 1px 5px;
}
a.menu-drawer__menu-item.list-menu__item[href="/collections/on-sale"]:after {
content: "";
width: 5px;
height: 5px;
position: absolute;
background: red;
transform: translate(-50%, -50%) rotate(45deg);
left: 50%;
top: 8px;
}
</style>
Best regards,
GemPages Support Team
HI @Andy106
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css
.header__inline-menu .list-menu > li:first-child .header__menu-item::before {
content: 'Hot';
position: absolute;
background: red;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
z-index: 999;
color: white;
}
.header__inline-menu .list-menu > li:first-child .header__menu-item {
position: relative;
}
yes, please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
a[href="/collections/on-sale"] {
position: relative;
}
a[href="/collections/on-sale"]::before {content: 'Hot';position: absolute;background: red;transform: translateX(-50%);padding: 3px 10px;z-index: 999;color: white;text-transform: uppercase;font-size: 12px;font-weight: bold;left: 50%;top: -10px;}
This is an accepted solution.
yes, please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
a[href="/collections/on-sale"] {
position: relative;
}
a[href="/collections/on-sale"]::before {content: 'Hot';position: absolute;background: red;transform: translateX(-50%);padding: 3px 10px;z-index: 999;color: white;text-transform: uppercase;font-size: 12px;font-weight: bold;left: 50%;top: -10px;}
The code worked when the menu item doesn't have sub menus.
how to fix it when the menu item has sub menus? like is "On Sale" is having sub menus like "Products".
Could you help me with my site too?
I want the same above the third button "Προσφορές".
Hi @Andy106 ,
This is Victor from PageFly - Landing Page Builder App.
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file base.css
.header__inline-menu .list-menu > li:first-child .header__menu-item::before {
content: 'Hot';
position: absolute;
background: red;
bottom: 70%;
left: 50%;
padding: 5px 10px;
z-index: 1;
color: white;
}
.header__inline-menu .list-menu > li:first-child .header__menu-item {
position: relative !important;
}
Hope this answer helps.
Best regards,
Victor | PageFly
This is an accepted solution.
Hello @Andy106 ,
It's GemPages support team and glad to support you today.
I would like to give you the recommendation to support you so kindly follow the steps below:
1. Go to Online Store > Theme > Edit code of your current theme
2. Open your theme.liquid theme file
3. Paste the below code before </head>
<style>
a.header__menu-item.list-menu__item[href="/collections/on-sale"] {
position: relative;
}
a.header__menu-item.list-menu__item[href="/collections/on-sale"]:before {
content: "HOT";
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 0;
font-size: 12px;
background: red;
color: white;
padding: 1px 5px;
}
a.header__menu-item.list-menu__item[href="/collections/on-sale"]:after {
content: "";
width: 5px;
height: 5px;
position: absolute;
background: red;
transform: translate(-50%, -50%) rotate(45deg);
left: 50%;
top: 8px;
}
</style>
For example,
It will look like that:
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
Hello and thanks for getting back to me.
Is there a way to make it appear on mobile view as well?
This is an accepted solution.
Hello @Andy106 ,
In order to fix it for mobile, you could please add the below code to before </head> in the theme.liquid file:
<style>
a.menu-drawer__menu-item.list-menu__item[href="/collections/on-sale"] {
position: relative;
display: inline-flex;
}
a.menu-drawer__menu-item.list-menu__item[href="/collections/on-sale"]:before {
content: "HOT";
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 0;
font-size: 12px;
background: red;
color: white;
padding: 1px 5px;
}
a.menu-drawer__menu-item.list-menu__item[href="/collections/on-sale"]:after {
content: "";
width: 5px;
height: 5px;
position: absolute;
background: red;
transform: translate(-50%, -50%) rotate(45deg);
left: 50%;
top: 8px;
}
</style>
Best regards,
GemPages Support Team
Great works excellent! Thank you.
I have another open question if its in your area of expertise have a look at it. Thanks 🙂
https://community.shopify.com/c/shopify-design/main-menu-navigation/td-p/1856776
I am glad that my solution is helpful to you.
Best regards,
GemPages Support Team
Hi
I wanted to add this to my site too.
I changed collections/on-sale to collections/Προσφορές to match my preferred button on the menu but it didn't work.
Could you help me?
My site is www.sexytreats.gr
@GemPages I am working on adding this to our website https://www.speedfactoryracing.net/ for the page Giveaway. If our navigation is listed under main menu, does that make a difference? I tried a couple different ways and cannot get this to populate for me. Any suggestions?
i followed same steps but not working on my impulse 7.1 theme can you help me
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