Adding shadow with CSS

• 

  eledireach · Member · Mar 7, 2022 at 10:56 am

  • Copy link
  • Add topic to favorites

  Hello,

  I would like to add a white shadow under the banner of my website (https://ewenledireach.fr/). If possible only when unrolling it.
  Even after searching on the internet, I couldn’t find any way to achieve my goal.

  Thank you in advance,

  Ewen LE DIRÉACH

  PS : Not having knowledge of the technical terms, I may not be very clear, if you need clarification do not hesitate to tell me.

  The blog I need help with is: (visible only to logged in users)

• 

  supernovia · Staff · Mar 7, 2022 at 4:15 pm

  • Copy link

  Hey there, actually you’ve already got a faint grey shadow below the banner, only when scrolling. Are you trying to change that to white?

  If so, you could add this to your Additional CSS:

  @media screen and (min-width: 1100px) {
    .sticking.sticky-wrapper {
      box-shadow: 0 0 3px 3px #ffffff0d;
    }
  }

  Or, if you wanted to keep the shadow you have and just add an additional light shadow above it, try something like this:

  @media screen and (min-width: 1100px) {
    .sticking.sticky-wrapper {
      box-shadow: 0 0 3px 3px #0000000d, inset 0px -3px 3px -3px #ffffff0d;
    }
  }

  Hoping that helps!

• 

  eledireach · Member · Mar 13, 2022 at 12:02 am

  • Copy link

  Thanks very much !

  I applied your advice, made some changes (on size and transparency) and now it’s perfect.

  Thanks again,

  Ewen LE DIRÉACH

• 

  supernovia · Staff · Mar 13, 2022 at 12:27 am

  • Copy link

  Glad you’ve got it just right. Cheers!