I have an interesting issue, in that when I scroll down the page the hover state of my 'Contact Us' button seems to change its color, very slightly. I'm searching my code for why, but can't see and hoping you guys can help shed some light on this.
The correct color state for the hover of the 'Contact Us' button is visible when you land on the page and don't yet scroll, but when you scroll you can see the color shift when you hover.
There seems to be CSS added in the Child Theme which is adding in two colors. If you wish to make it the same add below Custom CSS:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
html body #header-outer.small-nav #top .right-aligned-menu-items a.nectar-button.small.regular-button {
background: #6438e0 !important
}
I tried adding your code snippet, but it changes the color of the button when I scroll which isn't what I'm looking to do.
You are correct in that we are adding colors to our child-them to control the basic state and the hover state of the Contact Us button. I'm confused because if you scroll down a bit on our main page you see the list of buttons with the correct default state and hover state. But when I scroll down that Contact Us button hover state somehow appears a bit darker. I tried removing some !important declarations to fix this, but can't seem to make it work.
Hi there,
I have an interesting issue, in that when I scroll down the page the hover state of my 'Contact Us' button seems to change its color, very slightly. I'm searching my code for why, but can't see and hoping you guys can help shed some light on this.
The correct color state for the hover of the 'Contact Us' button is visible when you land on the page and don't yet scroll, but when you scroll you can see the color shift when you hover.
Thanks so much!
Blake
Hi there,
Here's a screenshot to share what I'm seeing when I scroll and then hover over the Contact Us button.
Thanks,
Blake
Attached files: scroll_color_shift.jpg
Hey Again,
There seems to be CSS added in the Child Theme which is adding in two colors. If you wish to make it the same add below Custom CSS:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
html body #header-outer.small-nav #top .right-aligned-menu-items a.nectar-button.small.regular-button { background: #6438e0 !important }Thanks
Thanks.
ThemeNectar Support Team
Hi Tahir,
I tried adding your code snippet, but it changes the color of the button when I scroll which isn't what I'm looking to do.
You are correct in that we are adding colors to our child-them to control the basic state and the hover state of the Contact Us button. I'm confused because if you scroll down a bit on our main page you see the list of buttons with the correct default state and hover state. But when I scroll down that Contact Us button hover state somehow appears a bit darker. I tried removing some !important declarations to fix this, but can't seem to make it work.
Any help is greatly appreciated.
Best,
Blake
Hey Again,
Its most likely a browser rendering issue as I cant see any CSS changes when I force the hover state via the browser console.
Thanks.
ThemeNectar Support Team