How can I add a badge or tag to my header menu?

Solved

How can I add a badge or tag to my header menu?

Andy106
Pathfinder
117 7 33

I like to add to my Menu something similar to this:

 

Andy106_0-1670890788627.png

 

Thanks in advance!

 

https://12rsifgo1nt79lud-68796285242.shopifypreview.com

Accepted Solutions (3)

KetanKumar
Shopify Partner
37585 3668 12152

This is an accepted solution.

@Andy106 

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;}

 

KetanKumar_0-1670902091022.png

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

GemPages
Shopify Partner
5625 1262 1267

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

GemPages_0-1670904862102.png


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,

GemPages_1-1670904945470.png

 

It will look like that:

GemPages_2-1670904974306.png

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

GemPages
Shopify Partner
5625 1262 1267

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 15 (15)

ExpertRookie
Shopify Partner
1518 249 324

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;
}

 

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

KetanKumar
Shopify Partner
37585 3668 12152

@Andy106 

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;}

KetanKumar_0-1670902091022.png

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

KetanKumar
Shopify Partner
37585 3668 12152

This is an accepted solution.

@Andy106 

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;}

 

KetanKumar_0-1670902091022.png

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NO-shop
Visitor
3 0 0

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".

MelinaPrarchar
Tourist
10 0 2

Could you help me with my site too?

I want the same above the third button "Προσφορές".

www.sexytreats.gr

PageFly-Victor
Shopify Partner
7865 1786 3127

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

GemPages
Shopify Partner
5625 1262 1267

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

GemPages_0-1670904862102.png


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,

GemPages_1-1670904945470.png

 

It will look like that:

GemPages_2-1670904974306.png

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Andy106
Pathfinder
117 7 33

Hello and thanks for getting back to me.

 

Is there a way to make it appear on mobile view as well?

GemPages
Shopify Partner
5625 1262 1267

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Andy106
Pathfinder
117 7 33

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

GemPages
Shopify Partner
5625 1262 1267

I am glad that my solution is helpful to you.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
MelinaPrarchar
Tourist
10 0 2

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

speedfactory
Visitor
1 0 0

@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?

cx
New Member
4 0 0

i followed same steps but not working on my impulse 7.1 theme can you help me

 

cx
New Member
4 0 0

cx_0-1687098294605.png