I have been trying to add a drop shadow to the header navigation once the user scrolls and the nav menu shrinks. I have tried every option but it doesn't look like it wants to cooperate. any ideas?
Add the CSS below to make the shadow darker so it's more pronounced.
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):
That looks better.. but when you scroll down and go over black sections, you cant see a shadow. is there anything we can do there to make it stand out?
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):
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):
body #header-outer[data-transparent-header="true"][data-remove-border="true"] {
border-bottom:1px solid #fff !important;
}
Hi there, amazing theme! Am wondering how to remove the top dropshadow on the header/nav
I have looked in the CSS but cant find it
Thanks!
Never mind, problem solved.
Nathan,
Can you share what fixed it?
Thanks,
Bob
Hey Bob ,
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
div#header-outer { box-shadow: none !important; }Thanks
ThemeNectar Support Team
Hi Team,
I have been trying to add a drop shadow to the header navigation once the user scrolls and the nav menu shrinks. I have tried every option but it doesn't look like it wants to cooperate. any ideas?
Hi Ale,
Please ensure this is turned on from Salient > Header Navigation > Transparent Header effect:
Thanks.
Hi Judith, Already tried that.. Any other suggestions to fix the problem?
Hi Alex,
Please send in your website url so that we can provide a css for it.
Thanks.
Scalpsusa.com
Hey Again,
Add the CSS below to make the shadow darker so it's more pronounced.
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):
#header-outer[data-box-shadow="large"], body.material[data-hhun="1"] #header-outer[data-header-resize="0"][data-box-shadow="large"][data-remove-fixed="0"]:not(.transparent):not(.invisible), body.material[data-hhun="1"] #header-outer[data-header-resize="0"][data-box-shadow="large"][data-remove-fixed="1"]:not(.transparent) { box-shadow: 0 3px 45px rgb(0 0 0 / 85%) !important; }Thanks
ThemeNectar Support Team
That looks better.. but when you scroll down and go over black sections, you cant see a shadow. is there anything we can do there to make it stand out?
Hi Alex,
Seems the header is not even transparent. Please send a screenshot for clarity.
Thanks.
Hey Again,
We can make the shadow color yellow or any other.
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):
#header-outer[data-box-shadow="large"], body.material[data-hhun="1"] #header-outer[data-header-resize="0"][data-box-shadow="large"][data-remove-fixed="0"]:not(.transparent):not(.invisible), body.material[data-hhun="1"] #header-outer[data-header-resize="0"][data-box-shadow="large"][data-remove-fixed="1"]:not(.transparent) { box-shadow: 0 3px 45px rgb(212 175 55 / 56%) !important; }Thanks
ThemeNectar Support Team
I sent you a screenshot over white and black areas
By Default there is no Box Shadow applied to the Transparent Header. If you wish to do so you can use the Custom CSS Below:
body #header-outer.transparent[data-transparent-header="true"][data-remove-border="true"] { box-shadow: 0 3px 45px rgb(212 175 55 / 61%) !important; }Thanks
ThemeNectar Support Team
Tahir.. the yellow was a great idea. Is there a way to keep it there? When scrolling starts, the shadow dissapears
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):
body #header-outer[data-transparent-header="true"][data-remove-border="true"] { box-shadow: 0 3px 45px rgb(212 175 55 / 61%) !important; }Thanks
ThemeNectar Support Team
Hi there! Is there anyway to just add the line and remove the shadow?
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):
body #header-outer[data-transparent-header="true"][data-remove-border="true"] { border-bottom:1px solid #fff !important; }Thanks
ThemeNectar Support Team