Introduction
If you are using the Astra WordPress theme and your logo looks faded, transparent, or distorted, the issue is often caused by CSS effects like opacity, filters, or blend modes. In this guide, we will show you a simple CSS solution to fix the problem instantly.
The Problem
Many users face issues such as:
- Logo appearing faded or low opacity
- Strange color blending
- Unexpected visual effects on the logo
This usually happens due to incorrect or conflicting CSS styles.
The Solution (Correct CSS Code)
Use the following CSS to fix your logo display:
.custom-logo {
filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
Common Mistake to Avoid
One of the most common errors is using a colon (:) instead of a semicolon (;) at the end of CSS properties.
Incorrect:
filter: none !important:
Correct:
filter: none !important;
Always make sure each CSS line ends with a semicolon.
Advanced Fix (If It Doesn’t Work)
If the basic CSS doesn’t apply, use a more specific selector:
.site-logo-img .custom-logo {
filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
Where to Add This CSS
You can add this code in:
- WordPress Customizer → Additional CSS
- Your theme’s custom CSS file
- Elementor Custom CSS (if using Elementor Pro)
Benefits of This Fix
- Restores full logo visibility
- Removes unwanted visual effects
- Improves branding and professionalism
- Works instantly without plugins
Conclusion
A small CSS mistake can affect your website’s appearance significantly. By applying the correct CSS and avoiding syntax errors, you can ensure your logo looks perfect across all devices.