Editing specific menu item

Solved

Editing specific menu item

brandnkay
Tourist
27 0 0

Hi I would like to achieve this can someone help please? thanks 🙂

 

 

desired look

 

My Store · Customize Trade · Shopify - Google Chrome 28_06_2024 14_41_31.png

Current look 

My Store · Customize Trade · Shopify - Google Chrome 28_06_2024 14_38_31.png

 

all help is appreciated!

Accepted Solutions (2)
Moeed
Shopify Partner
4361 1123 1380

This is an accepted solution.

Hey @brandnkay 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
a#HeaderMenu-contact {
    background: #47B749 !important;
    color: white !important;
    border-radius: 20px !important;
}
</style>

RESULT:

Moeed_0-1719582737198.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

ProtoMan44
Shopify Partner
495 43 80

This is an accepted solution.

@brandnkay  can you please put this code:

a#HeaderMenu-contact:hover span {
    text-decoration: none;
}

if it hepful so pleas mark it as silved.

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

View solution in original post

Replies 10 (10)

Moeed
Shopify Partner
4361 1123 1380

Hey @brandnkay 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
brandnkay
Tourist
27 0 0
Moeed
Shopify Partner
4361 1123 1380

This is an accepted solution.

Hey @brandnkay 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
a#HeaderMenu-contact {
    background: #47B749 !important;
    color: white !important;
    border-radius: 20px !important;
}
</style>

RESULT:

Moeed_0-1719582737198.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
brandnkay
Tourist
27 0 0

Great thanks! i have added a hover effect but and i would like to remove the underline text decoration i have set it to none but it is still underlined when i hover over it.. 

 

thanks

brandnkay
Tourist
27 0 0

@Moeed do you have a solution for this? thanks

ProtoMan44
Shopify Partner
495 43 80

@brandnkay hey, thanks for posting here.
 can you please share the link to inspect it, thanks.

otherwise you can edit menu code add link title as class or atribute :

<a {{ item.title | replace: ' ' , '-'}} href="{{ item.url }}">{{ item.title }}</a>


result : <a contact href="/pages/contact">contact</a>
then you will able to target specific a tag

a[contact]{
<--! css code -->
}

i hope will understand it, if it helpful for you so please mark it as solution .
thanks



- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

ProtoMan44
Shopify Partner
495 43 80

@brandnkay 

a#HeaderMenu-contact {
<-- css code -->
}
- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
brandnkay
Tourist
27 0 0

Hi please check my store and if possible tell me how to remove the underline form the contact button when you hover over it

 

ProtoMan44
Shopify Partner
495 43 80

This is an accepted solution.

@brandnkay  can you please put this code:

a#HeaderMenu-contact:hover span {
    text-decoration: none;
}

if it hepful so pleas mark it as silved.

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
brandnkay
Tourist
27 0 0

Thank you very much!