Header Shadow – Summary Block

If you want to have a header shadow like this

Do the below guiding:

Add these codes to the Custom CSS box

Table of Contents

Desktop Only

/* Desktop Only */
@media screen and (min-width:768px) {
header#header {
    box-shadow: 3px 2px 9px #f1f;
}
}

/* Mobile Only */
@media screen and (max-width:767px) {
 header#header {
    box-shadow: 3px 2px 9px #f1f;
}
}

/* Blog Page */
[class*="type-blog"] header#header {
    box-shadow: 3px 2px 9px #f1f;
}

/* Event */
[class*="type-event"] header#header {
    box-shadow: 3px 2px 9px #f1f;
}

/* Product Page */
[class*="type-products"] header#header {
    box-shadow: 3px 2px 9px #f1f;
}

/* Cart Page */
body#cart header#header {
    box-shadow: 3px 2px 9px #f1f;
}

/* Homepage Only */
body.homepage header#header {
    box-shadow: 3px 2px 9px #f1f;
}

/* Other pages - exclude homepage */
body:not(.homepage) header#header {
    box-shadow: 3px 2px 9px #f1f;
}

/* On Scroll Only */
header#header.shrink {
    box-shadow: 3px 2px 9px #f1f;
}

/* Before Scroll */
header#header:not(.shrink) {
    box-shadow: 3px 2px 9px #f1f;
}

Add this code to the Individual Page Header Code Injection (If your plan is Personal, you can add code to Code Block)

<!-- Header Shadow - One Page -->
<style>
header#header {
    box-shadow: 3px 2px 9px #f1f;
}
</style>