Hello, I have a transparent header which changes from color whenever you scroll down on the home page. I have a cta button in my header which I want to change colors whenever the header changes from color. For now, the transparent header button is completely white and I want to change the button text color to black. I have tried it with CSS, which helped with the non-transparent button, however, with the transparent button it seems to do nothing at all.
The CSS codes I have used are:
#top nav > ul > li.button_solid_color > a:before, #header-outer.transparent #top nav > ul > li.button_solid_color > a:before { background-color: #ffffff !important; color: #e57949 !important; }
#top nav > ul > li.button_solid_color > a:before, #header-outer.transparent:not([data-lhe="animated_underline"]).dark-slide #top nav > ul > li.button_solid_color > a:before { background-color: #e57949 !important; }
The second line of code works, but the first one for the transparent button doesn't work. What do I have to do now?
body #header-outer.transparent #top nav > ul > li[class*="button_solid_color"] > a, #header-outer[data-lhe="animated_underline"] #top nav > ul > li[class*="button_solid_color"] > a {
color: black !important;
}
Hi, how can I change the button text colour from white to something else?
Hey,
You can set the accent colors in Salient Theme Options Panel and then use that in the button shortcode.
Thanks
ThemeNectar Support Team
Hello, I have a transparent header which changes from color whenever you scroll down on the home page. I have a cta button in my header which I want to change colors whenever the header changes from color. For now, the transparent header button is completely white and I want to change the button text color to black. I have tried it with CSS, which helped with the non-transparent button, however, with the transparent button it seems to do nothing at all.
The CSS codes I have used are:
#top nav > ul > li.button_solid_color > a:before, #header-outer.transparent #top nav > ul > li.button_solid_color > a:before {
background-color: #ffffff !important;
color: #e57949 !important;
}
#top nav > ul > li.button_solid_color > a:before, #header-outer.transparent:not([data-lhe="animated_underline"]).dark-slide #top nav > ul > li.button_solid_color > a:before {
background-color: #e57949 !important;
}
The second line of code works, but the first one for the transparent button doesn't work. What do I have to do now?
Thanks in advance!
@Gabriel,
Please provide the page URL so I may write up the custom CSS for this request.
Thanks
ThemeNectar Support Team
http://bezwaartegentelemarketing.nl/ This is the Page URL.
Thank you in advance,
Gabriel
Hi Gabriel,
Use the following custom css:
body #header-outer.transparent #top nav > ul > li[class*="button_solid_color"] > a, #header-outer[data-lhe="animated_underline"] #top nav > ul > li[class*="button_solid_color"] > a { color: black !important; }Hope this helps.