Hey guys...struggling over the header nav either going transparent or not being able to change the header background color to dark when scrolling back up the page so the navigation remains visible all the way to the end of the scroll.
While I initially thought there was something weird going on, as you can see on a page where the nectar setting is set to 'dark' I don't have an issue: http://dev1.taylorderrick.com/debt/
So I guess the question is, is it possible adjust the setting so that even if a nectar sliders' color is set to light, the navigation can remain transparent when scrolling back to the top of the page?
To clarify, do you want your header to remain transparent at all times? If so, try enabling this option in the Salient > Header Navigation > Transparent Header settings.
Try that and let us know how it goes. We look forward to your reply.
The problem is, if I use this option then when you begin scrolling up the nav gets lost in any image (see below).
So basically on page load we want the menu to be transparent, for the menu to go away when the user scrolls down, but then reappear and inherit the background color when the user scrolls up and remain visible (with a background - including the top row) until the user gets to the very top of the page when the background row goes transparent again.
I belive the reason this works on this page ( http://dev1.taylorderrick.com/debt/) is because the slider is calling up a dark menu, but on all the other other pages (which use a the light color) when your scrolling up on the first row (with the nectar slider which specifies the nav to go light) you can no longer see the white nav on top of the white background and only see the indicator line of the current page in the nav.
So I guess, the question is, is there any work around to allow the functionality above so when the user is scrolling up to the top of the page the nav doesn't go away since you cant see the white on top of the white?
PS...I did try to change the background color of top row to a dark gray which the nectar slider is contained in so you'd still be able to see the white nav when it appears over the nectar slider, but oddly, while the nav text changes to white as expected, the logo now changes to the dark color? Any suggestions?
So basically on page load (and before the user scrolls) we want the menu to be transparent, then when the user scrolls down the menu disappears, but then when the user begins to scroll up, the menu will reappear (with background that will inherit the background color and remain visible until the user gets to the very top of the page when the background row goes transparent again.
Yes, close...but if you review my first post I mentioned the issue I had mentioned that when the user is scrolling up the page when you get to the top row where the nectar slider is held both the background and navigation is going white so you do not see the navigation and you only see the marker line for the page your on. Needing the navigation to be present all the way until the user hits the top of the page.
Thanks for your patience, and apologies for the back-and-forth.
I now understand the issue better. It appears the behavior is caused by the background color settings when scrolling up. Kindly try the following CSS snippet:
If this doesn't resolve the issue, feel free to privately share your login credentials (dashboard URL, username, and password) so we can assist you further.
To assist you further, could you kindly create a temporary admin user for us so we can review the issue directly? You may use any email address when setting up the account, as we do not have a designated support email. Please ensure the login credentials are working before sharing them with us. This will help us investigate more efficiently.
Hey guys...struggling over the header nav either going transparent or not being able to change the header background color to dark when scrolling back up the page so the navigation remains visible all the way to the end of the scroll.
While I initially thought there was something weird going on, as you can see on a page where the nectar setting is set to 'dark' I don't have an issue: http://dev1.taylorderrick.com/debt/
So I guess the question is, is it possible adjust the setting so that even if a nectar sliders' color is set to light, the navigation can remain transparent when scrolling back to the top of the page?
Hi Eric,
Thank you for getting in touch.
To clarify, do you want your header to remain transparent at all times? If so, try enabling this option in the Salient > Header Navigation > Transparent Header settings.
Try that and let us know how it goes. We look forward to your reply.
Cheers,
Thanks for getting back Austin.
The problem is, if I use this option then when you begin scrolling up the nav gets lost in any image (see below).
So basically on page load we want the menu to be transparent, for the menu to go away when the user scrolls down, but then reappear and inherit the background color when the user scrolls up and remain visible (with a background - including the top row) until the user gets to the very top of the page when the background row goes transparent again.
I belive the reason this works on this page ( http://dev1.taylorderrick.com/debt/) is because the slider is calling up a dark menu, but on all the other other pages (which use a the light color) when your scrolling up on the first row (with the nectar slider which specifies the nav to go light) you can no longer see the white nav on top of the white background and only see the indicator line of the current page in the nav.
So I guess, the question is, is there any work around to allow the functionality above so when the user is scrolling up to the top of the page the nav doesn't go away since you cant see the white on top of the white?
PS...I did try to change the background color of top row to a dark gray which the nectar slider is contained in so you'd still be able to see the white nav when it appears over the nectar slider, but oddly, while the nav text changes to white as expected, the logo now changes to the dark color? Any suggestions?
Hi Eric,
Great to have you back!
Just for clarity - could you kindly confirm how you'd like this to appear?
Thanks again,
Salient Theme Support
Here it is again but maybe a bit clearer:
So basically on page load (and before the user scrolls) we want the menu to be transparent, then when the user scrolls down the menu disappears, but then when the user begins to scroll up, the menu will reappear (with background that will inherit the background color and remain visible until the user gets to the very top of the page when the background row goes transparent again.
Hi Eric,
Thanks for the detailed explanation.
From my end, this is the behavior I'm seeing - could you kindly confirm if there's anything more that needs to be implemented?
If I've misunderstood anything, please feel free to clarify - we're here to help!
Thanks again,
Salient Theme Support
Yes, close...but if you review my first post I mentioned the issue I had mentioned that when the user is scrolling up the page when you get to the top row where the nectar slider is held both the background and navigation is going white so you do not see the navigation and you only see the marker line for the page your on. Needing the navigation to be present all the way until the user hits the top of the page.
Hi again,
Thanks for your patience, and apologies for the back-and-forth.
I now understand the issue better. It appears the behavior is caused by the background color settings when scrolling up. Kindly try the following CSS snippet:
#header-outer { background-color: transparent !important; transition: background-color 0.4s ease; } #header-outer.scrolled-bg { background-color: #232323 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } #logo img.stnd.default-logo, #logo img.starting-logo.skip-lazy.default-logo, #logo img.mobile-only-logo { transition: opacity 0.4s ease; position: absolute; top: 0; left: 0; width: auto; height: 60px; } #logo img.default-logo.white-logo, #logo img.starting-logo { opacity: 1; z-index: 10; } #logo img.default-logo.dark-version, #logo img.starting-logo.dark-version { opacity: 0; z-index: 1; position: absolute; } #header-outer.scrolled-bg #logo img.default-logo.white-logo, #header-outer.scrolled-bg #logo img.starting-logo { opacity: 0; z-index: 1; } #header-outer.scrolled-bg #logo img.default-logo.dark-version, #header-outer.scrolled-bg #logo img.starting-logo.dark-version { opacity: 1; z-index: 10; }If this doesn't resolve the issue, feel free to privately share your login credentials (dashboard URL, username, and password) so we can assist you further.
Thanks again,
Salient Theme Support
Hi Again,
Thanks for following through.
To assist you further, could you kindly create a temporary admin user for us so we can review the issue directly? You may use any email address when setting up the account, as we do not have a designated support email. Please ensure the login credentials are working before sharing them with us. This will help us investigate more efficiently.
Best,
Salient Support Team