Site Link Colours

Support
#1

I’d like to be able to add multiple options for site link colours and their hover colour. There is only one option for sitelinks and it overrides html and css coded on specific pages.

#2

Hi Halim,

Thanks for reaching out.
There are no other options for adding the additional Link color to the site. You may need to use the custom CSS code for it. If that is been overridden please use the !important with the specific attribute values to make it a higher priority.

Please go through the following article on important property of the CSS: https://www.w3schools.com/css/css_important.asp

Hope it helps.
Thanks

#3

Thanks for the reply. I tried your fix and it did not work, see the image attached below. The black text beginning with Invisalign should be white. The hover css works but not the color.

Screen Shot 2021-07-29 at 10.05.37 AM
Screen Shot 2021-07-29 at 10.05.37 AM813×397 182 KB

#4

Hello Halim,

It seems that you are trying to change the anchor color so your CSS selector needs to be like this “.header-links a” and " .header-links a: hover ". You can learn how to use the browser’s element inspector to select the CSS selector . If it doesn’t work for you I would request you please share your exact page URL with a marking screenshot so that we can advise you properly.

Thanks

#5

This is the URL, you will see the section mentioned above three sections down from the top. This is a mock page for our new header image.
https://www.sbenatidentistry.ca/mock-header/

#6

Hello Halim,

The given page URL is redirecting to the home page. I would suggest you recheck and send us again.

Thanks

#7

The page was private, try now!

#8

Hello Halim,

You can use this custom CSS code under Page–>CSS or X/Pro—>Theme option —>CSS

.header-links span {
    color: #ffffff;
}
.header-links a {
    color: #ffffff;
}
.header-links span {
    color: #ffffff;
}

.header-links a:hover {
    color: #673ab7;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

#9

Thank you. I see I just needed to add the span selector to make the css render what I needed. My inspect tool has been acting up recently, thanks again.

#10

Hi Halim,

Glad that we are able to help you.

Thanks

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.