Editing specific menu item

[brandnkay]

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

desired look

Current look 

all help is appreciated!

[Moeed · 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:

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

Best Regards,
Moeed

[Moeed]

Hey @brandnkay 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[brandnkay]

https://shearsupplies.co.uk/

[Moeed · 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:

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

Best Regards,
Moeed

[brandnkay]

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]

@Moeed do you have a solution for this? thanks

[ProtoMan44]

@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

[ProtoMan44]

@brandnkay 

a#HeaderMenu-contact {
<-- css code -->
}

[brandnkay]

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

[brandnkay]

Thank you very much!