Change The Color Of A Single Navigation Menu or Make it As a Button

[Ernestass]

Hello guys,

I want to change the single navigation menu “BOOK FREE DEMO” to a button like in the example below “TRY FOR FREE”. Is there any way to do it? The button color would be #F9D916, my theme name is BOOST. If this is something that can’t be done on this theme, is there any way to change the color of the text and make it a little bit bolder?

Many thanks in advance,

Ernestas

[AvadaCommerce]

Hi @Ernestass ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[KetanKumar]

@Ernestass

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Tony_Bui]

Guys, I guess this is the URL of a merchant https://www.robocube.co.uk/pages/test-hub

[KetanKumar]

@Tony_Bui

great thanks for url can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css ->paste below code at the bottom of the file.

/* if you have chagne page name please change also link for example a[href="/pages/xyl"]  */
a[href="/pages/test-hub"] {
    background: rgb(235, 133, 4);
    color: #fff !important;
    padding-top: 15px !important;
}

[AvadaCommerce]

Hi @Tony_Bui @Ernestass

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css->paste below code at the bottom of the file:

.site-nav .site-nav__item.site-nav--active .site-nav__link {
    padding-top: 10px;
    background: #fad24c;
    border-radius: 20px;
}

.site-nav .site-nav__item.site-nav--active .site-nav__link:after {
    display: none !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[Ernestass]

Hello Tony,

Thank you for your help. The button appeared on the navigation, however, I’d need the button to be on the BOOK FREE DEMO. Also, It disappears if I go to a different page. Is there any way to keep it all the time no matter what page you are on?

page URL - https://www.robocube.co.uk

[Ernestass]

Also, is there any way to make the corners round by 5px?

[Ernestass]

Hello Katen!

The button is there, but it affects other buttons that are related to the same page. Also, is there any chance to round the button corners by 5px?

Many thanks in advance,

Ernestas

[KetanKumar]

@Ernestass

yes, please add this code

a[href="/pages/test-hub"] {
    background: rgb(235, 133, 4);
    color: #fff !important;
    padding-top: 15px !important;
    border-radius: 5px !important;
}