Okay
  Public Ticket #1825463
Shadow Behind Transparent Header
Closed

Comments

  • sydney86 started the conversation
    December 18, 2018 at 9:12am

    Hello,

    I have enabled "Add Shadow Behind Transparent Header" in Salient/Header Navigation/Transparent Header Effect. It works fine.

    Is there a way to control shadow opacity? Sometimes my menu doesn't have enough contrast with the background. And I now I can use dark text, but that doesn't solve the problem every time.

    Thank you.

  •  8,996
    Tahir replied
    December 18, 2018 at 9:57am

    Hey,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  • sydney86 replied
    December 19, 2018 at 9:22am

    Hello Tahir,

    this is the website: http://www.triant-nabytek.cz/index.php/atua/

    Thanks.

  •  8,996
    Tahir replied
    December 19, 2018 at 10:17am

    Adjust the values as per your liking.

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    #header-outer[data-box-shadow="small"] {
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
}

    Thanks

    ThemeNectar Support Team 

  • sydney86 replied
    December 19, 2018 at 12:41pm

    So I have tried the solution but it is probably for something different (I could not tell any difference).

    Eventually I found the solution:

    #header-outer[data-transparent-header="true"][data-transparent-shadow-helper="true"].transparent:not(.dark-slide):before {
  background: linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.07) 16%,rgba(0,0,0,0.33) 75%,rgba(0,0,0,0.45) 100%);
  position: absolute;
  pointer-events: none;
  height: 150%;
  top: 0;
  left: 0;
  width: 100%;
  content: '';
  display: block;
}

    The gradient is actually combined from multiple gradients so it is possible to really fine tune the desired look.

    Thanks.