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

[tdr-solsant]

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?

[comercioservice · 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

[comercioservice · 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

[comercioservice · Accepted solution]

@tdr-solsant  result:

[tdr-solsant]

You absolute legend! Thank you very much.

[comercioservice]

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