Question 165335 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Does WordPress support box-shadow css property?

The box-shadow on this page https://5pshomes.artrageousdemo.com/ appears under the sticky header once you scroll down the page, but not the header when it is positioned at the top. At least if it does show up, it is too faint to see, and I want it slightly more noticeable. I have tried targeting multiple different classes, but I can’t get it to show up properly under the header when it is at the very top of the page.

If anyone could use the inspect element to have a look at this, I’d appreciate it.

Thanks,

Tags:

3

Answers


  1. 0

    you should use like this

    offset-x | offset-y | blur-radius | spread-radius | color

    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

    Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#syntax

    Login or Signup to reply.
  2. 0

    To make the distinction while positioning at top, you can add border-bottom like this in the element style:

    element.style {
    border-bottom: 5px ridge grey;
}

    To make the distinction while scrolling it down, you can enhance border shadow like this in :

    .fl-page-nav-right .fl-page-header-wrap {
          box-shadow: 0px 10px 10px grey;
 }
    Login or Signup to reply.
  3. 0

    Try following, hope it may help

    header.fl-page-header {

    box-shadow: rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px, rgb(10 37 64 / 35%) 0px -2px 6px 0px inset;
   
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search