Adding a border round a menu item to make it look like a button

Solved

Adding a border round a menu item to make it look like a button

tdr-solsant
Visitor
3 0 2

Hi,

 

Website: www.chirp-protect.com.

 

I wish to make the final menu item (Arrange a Trial) look like a button, so it stands out - similar to the Read More button on the banner image below it. So basically having a teal (007B85) border around the text. Does anyone know how I can achieve this please?

Accepted Solutions (2)

comercioservice
Shopify Partner
264 37 30

This is an accepted solution.

@tdr-solsant 

 
   
hi Hope you are well,
I’ve taken a look at what you need—just a little CSS magic, and everything will be fixed! Follow my steps, and you'll have it sorted in no time!

1, from admin, go to Online Store > Themes.
2, Actions > Edit code for your active theme.
3, Find and open the theme.liquid file, maybe in the Layout folder.
4, Look for the </head> tag and paste the code in the end

 

<style>
.header__secondary-nav nav.header__link-list a {
    background: #007B85;
    padding: 13px 20px;
    border-radius: 10px;
}

</style>​

 

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM
Thank you
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
Need store customizations, bug fixing or development ? Contact with us -- Support form for quick quote!
BFCM Big Deals: Big savings 25% off -on our Shopify FAQs apps!

View solution in original post

comercioservice
Shopify Partner
264 37 30

This is an accepted solution.

@tdr-solsant  result:

gutenplayer_0-1728567708680.png

 

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
Need store customizations, bug fixing or development ? Contact with us -- Support form for quick quote!
BFCM Big Deals: Big savings 25% off -on our Shopify FAQs apps!

View solution in original post

Replies 4 (4)

comercioservice
Shopify Partner
264 37 30

This is an accepted solution.

@tdr-solsant 

 
   
hi Hope you are well,
I’ve taken a look at what you need—just a little CSS magic, and everything will be fixed! Follow my steps, and you'll have it sorted in no time!

1, from admin, go to Online Store > Themes.
2, Actions > Edit code for your active theme.
3, Find and open the theme.liquid file, maybe in the Layout folder.
4, Look for the </head> tag and paste the code in the end

 

<style>
.header__secondary-nav nav.header__link-list a {
    background: #007B85;
    padding: 13px 20px;
    border-radius: 10px;
}

</style>​

 

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM
Thank you
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
Need store customizations, bug fixing or development ? Contact with us -- Support form for quick quote!
BFCM Big Deals: Big savings 25% off -on our Shopify FAQs apps!
comercioservice
Shopify Partner
264 37 30

This is an accepted solution.

@tdr-solsant  result:

gutenplayer_0-1728567708680.png

 

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
Need store customizations, bug fixing or development ? Contact with us -- Support form for quick quote!
BFCM Big Deals: Big savings 25% off -on our Shopify FAQs apps!
tdr-solsant
Visitor
3 0 2

You absolute legend! Thank you very much.

comercioservice
Shopify Partner
264 37 30

@tdr-solsant just any kind of problem let me know 

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
Need store customizations, bug fixing or development ? Contact with us -- Support form for quick quote!
BFCM Big Deals: Big savings 25% off -on our Shopify FAQs apps!