Hi Tahir, Thanks for the quick response! Since secondary nav button options are not an option, how about these instead:
Styling CSS to update the look of the button in the nav bar (beyond the color options in Salient theme color settings).
What would you recommend as CSS to change the nav button color on scroll (AKA: the sticky nav has ORANGE color for button on scroll but button is the soft blue when it is on the regular nav bar?)
Hey Andrew, Thanks for this code. This is handy...and... What I'm trying to do now is modify the "free trial" button that is in the main nav bar.
IE:
1. Ability to change the button color to options that are not included in the standard 3 colors for the theme. 2. PLUS, ability to make the nav button CHANGE COLOR on scroll -- once it switches to the sticky nav (vs main top nav).
I've tried multiple CSS approaches for this but no luck. Many thanks for your insights and know-how.
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):
/* before scroll */
body #header-outer.transparent #top nav >ul >li[class*="button_solid_color"] >a:before {
background: #ff6d00 !important;
}
body #header-outer.transparent #top nav >ul >li[class*="button_solid_color"] >a {
color: #000 !important;
}
/* after scroll */
body #header-outer.small-nav #top nav >ul >li[class*="button_solid_color"] >a:before {
background: #ff1053 !important;
}
body #header-outer.small-nav #top nav >ul >li[class*="button_solid_color"] >a {
color: #2ac4ea !important;
}
Hello, we would like to move our "sign in" / "sign up" option buttons to the secondary nav (which is not currently active).
I've seen one tech support doc from 2017 on this type of request but want to check in to see your tips to create these on Salient theme.
Hey Again,
I am afraid the Button Styling still does not apply to the Secondary Header.
Thanks
ThemeNectar Support Team
Hi Tahir, Thanks for the quick response!
Since secondary nav button options are not an option, how about these instead:
Hi there,
Try the following custom css in Salient > General settings > CSS/Script related:
#header-secondary-outer nav >ul >li >a { background: red; padding-left: 15px !important; padding-right: 15px !important; border-radius: 5px; }Kind regards.
Hey Andrew, Thanks for this code. This is handy...and...
What I'm trying to do now is modify the "free trial" button that is in the main nav bar.
IE:
1. Ability to change the button color to options that are not included in the standard 3 colors for the theme.
2. PLUS, ability to make the nav button CHANGE COLOR on scroll -- once it switches to the sticky nav (vs main top nav).
I've tried multiple CSS approaches for this but no luck.
Many thanks for your insights and know-how.
Hey Again,
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):
/* before scroll */ body #header-outer.transparent #top nav >ul >li[class*="button_solid_color"] >a:before { background: #ff6d00 !important; } body #header-outer.transparent #top nav >ul >li[class*="button_solid_color"] >a { color: #000 !important; } /* after scroll */ body #header-outer.small-nav #top nav >ul >li[class*="button_solid_color"] >a:before { background: #ff1053 !important; } body #header-outer.small-nav #top nav >ul >li[class*="button_solid_color"] >a { color: #2ac4ea !important; }Thanks
ThemeNectar Support Team