BugWP logo BugWP
Back to Community
Home / Community / Theme → Customify

How to Remove or Customize the Page Header Shadow in Customify

34 threads Sep 16, 2025 Theme → Customify

Content

Many Customify theme users want to adjust the appearance of their page header, particularly the semi-transparent color overlay that can create a shadow effect on the header image. This is a common request to make text more readable or to achieve a specific design aesthetic. Based on community support threads, here are the most effective solutions.

Why This Happens

The Customify theme uses a CSS pseudo-element (::before) to create a color overlay on the page header. This is often used to improve text contrast but can appear as an unwanted shadow on the header image itself. The setting to control this is located within the Customizer, but it can sometimes be difficult to locate or may not provide the precise control a user needs.

Common Solutions

Method 1: Use the Customizer Setting (If Available)

First, check the built-in theme options. Navigate to Appearance → Customize → Layouts → Page Header → Cover Settings. Look for a setting labeled "Color Overlay" or similar. If available, you can adjust the color or set the opacity to zero here. For some users, this setting may be sufficient to remove the shadow effect.

Method 2: Add Custom CSS (The Most Reliable Method)

If the Customizer setting does not provide the control you need, adding a small snippet of CSS code is the most common and effective solution. This method directly targets the overlay element and makes it transparent.

  1. Go to Appearance → Customize → Additional CSS.
  2. Copy and paste the following CSS code into the text area: 
    .page-cover:before {
    background: transparent;
}
  3. Click Publish to save your changes. The shadow/overlay on your header image should now be removed.

Method 3: Adjust Overlay Opacity (For a Custom Look)

Instead of removing the overlay completely, you might want to just adjust its darkness. You can use CSS to fine-tune the opacity to your liking. The code below uses RGBA color values, where the last value (0.6 in this example) controls opacity (0 is fully transparent, 1 is fully opaque).

.page-cover::before {
    background-color: rgba(0,0,0,.6);
}

Experiment with the last number (e.g., .3 for a lighter overlay, .8 for a darker one) until you achieve the desired effect.

Troubleshooting Tips

  • Check for Conflicting Plugins: In some cases, a functionality or styling conflict with another plugin can cause unexpected display issues. As seen in one thread, a grey box was resolved by identifying a conflicting plugin. Try temporarily deactivating your plugins one by one to see if the issue resolves.
  • Use Your Browser's Inspector Tool: Right-click on the element you want to change and select "Inspect" or "Inspect Element." This will show you the exact CSS classes and rules affecting it, which can help you write more targeted custom CSS.

By following these steps, you should be able to successfully remove or customize the header shadow and achieve the perfect look for your site.

Related Support Threads Support