I have managed to get the second header transparent, but on scroll, it doesn't take on the "dark and Light settings like the rest of the header. And this means that on scroll the secondary header seems to disappear.
This site is currently a test site but I need to get this working before I can get this approved by the client to take up the theme and get the site properly built. Will send private link in next post
Thanks Judith. Its the secondary header I am having issues with. I got it to be transparent but the colours don't change to suit the background colour.. ie it stays light on a light bg etc when the main header changes as it should
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):
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):
This doesn't give me what I need. This just makes the secondary header text black all the time. where I want it to start light/white on transparent backggrou8nd and go dark or light depending on the page ( the same way the main navigation does
I've just modified the CSS to allow for the secondary header text to display dark only when needed. Can you try testing again from your end to verify it's what you were looking for?
I do notice though for example on the home page, that when it scrolls past sections where the rest of the header presents as "light", it remains dark. (see screenshot)
Now for the last thing.
I would like to reset the colours for this ( ie if its dark #111f2a. and if its light #ffffff) currently the light type is grey as it wasn't showing at all on the white backgground.
Can you tell me where you modified it and where I can set these?
I just altered the snippet once more to take into consideration the "Header Inherit Row Color" effect you're using. The snippet is sitting in your Salient options panel > general settings > css box:
Theres one other TINY thing thats bugging me... the borders between the items are not connecting with the border below... on the secondary nav... like the line height is too big or something. Can you see what I mean?
I have managed to get the second header transparent, but on scroll, it doesn't take on the "dark and Light settings like the rest of the header. And this means that on scroll the secondary header seems to disappear.
This site is currently a test site but I need to get this working before I can get this approved by the client to take up the theme and get the site properly built. Will send private link in next post
Hello Jen,
Thanks for keeping in touch.
Please check to ensure these options are enabled: Salient > Header navigation > Transparent header effect:
From page settings:
Thanks.
Thanks Judith. Its the secondary header I am having issues with. I got it to be transparent but the colours don't change to suit the background colour.. ie it stays light on a light bg etc when the main header changes as it should
Hi Jen,
Please send in your admin login credentials so that we can check this out.
Thanks.
A good example is this page which has a white header
https://kd-sheilahealth.tempurl.host/appointments/team-viv/
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):
div#header-outer.small-nav #header-secondary-outer * {color: #000 !important;}Thanks
ThemeNectar Support Team
Thankyou.
That is working on scroll but not on pages that start with a white header. ie
https://kd-sheilahealth.tempurl.host/viv_vip/
ie on that page you can't see it until you scroll
I have changed the default colour to grey so you can see it... but otherwise the change of colour don't happen unless you scroll
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):
div#header-outer #header-secondary-outer * {color: #000 !important;}Thanks
ThemeNectar Support Team
Hi Tahir,
This doesn't give me what I need. This just makes the secondary header text black all the time. where I want it to start light/white on transparent backggrou8nd and go dark or light depending on the page ( the same way the main navigation does
Hi Jen,
Please allow me to escalate this to the developer to respond further.
Thanks.
Hey Jen,
I've just modified the CSS to allow for the secondary header text to display dark only when needed. Can you try testing again from your end to verify it's what you were looking for?
Kind regards,
Thankyou! Thats brilliant.
Its looking wAYYYYYY better.
I do notice though for example on the home page, that when it scrolls past sections where the rest of the header presents as "light", it remains dark. (see screenshot)
Now for the last thing.
I would like to reset the colours for this ( ie if its dark #111f2a. and if its light #ffffff) currently the light type is grey as it wasn't showing at all on the white backgground.
Can you tell me where you modified it and where I can set these?
Fixed this
example where it shows thhat the secondary header is displaying "dark" when rest of nav is displaying as light
Hey Jen
I just altered the snippet once more to take into consideration the "Header Inherit Row Color" effect you're using. The snippet is sitting in your Salient options panel > general settings > css box:
div#header-outer:not(.transparent):not(.light-text) #header-secondary-outer * { color: #111f2a !important; }Kind regards,
Thats perfect..
THANKYOU!
Theres one other TINY thing thats bugging me... the borders between the items are not connecting with the border below... on the secondary nav... like the line height is too big or something. Can you see what I mean?
Hello Jen,
Please try this css:
body #header-secondary-outer nav>ul>li>a {line-height: 15px;
}
Thanks.