Hello @vnonj,
Thank you for reaching out,
and thank you for your kind words.
That color is actually an overlay. Since you are using a transparent png image, the background color is showing through. To remove it, go to your WP Dashboard > Appearance > Customizer > Header > Header Media, and set the overlay opacity to 0: https://postimg.cc/7GkRpT0m.
After you make this change, please clear all levels of cache: https://postimg.cc/dLLCcNsQ.
I hope it helps,
Best Regards
Thread Starter
vnonj
(@vnonj)
Thank you so much! The gray color is gone—it looks perfect.
My banner isn’t displaying fully; the bottom part is missing. Do you know what I can do about this, please?
Hello @vnonj,
Thank you for getting back.
The best method is uploading an image 1200x100px.
And set the header height from Customizer > Header > General > Height.
However you can add a custom CSS to adjust it. So in this case you need to adjust the positioning of the image from Customizer > Header > Header Media > Position and set it on “Top Center”, then add the following CSS to Customizer > Custom CSS/JS > CSS:
@media(min-width:768px) {
#site-header.top-header .header-bottom {
margin-bottom: 40px;
}
}
@media(max-width:767px) {
#site-header {
background-size: contain;
}
#site-header.top-header #site-logo {
padding: 0 0 50px 0;
}
}
Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.
Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).
Hope it helps,
Best Regards
Thread Starter
vnonj
(@vnonj)
Thank you very much!
The desktop version is perfect now.
As for the mobile version, the header image isn’t displaying in full (only a small part of it is visible). I’m sorry to take advantage of your kindness, but how can I make the banner display in full on mobile?
Thank you very much…
Hello @vnonj,
Don’t worry at all, we are here to help you.
Actually, I added custom CSS for mobile in my previous reply. However, it seems it isn’t strong enough.
Instead of that part of the CSS, please use the following code and recheck the issue I modified it a bit:
@media(max-width:767px) {
#site-header {
background-size: contain !important;
}
#site-header.top-header #site-logo {
padding: 0 0 27px 0 !important;
}
}
Result should be like this: https://postimg.cc/grzn577b.
Please keep us posted.
Best Regards
Thread Starter
vnonj
(@vnonj)
Sorry Shahin, I forgot to mention that, for the desktop version, I used your first suggestion and simply adjusted the banner size to 1200 × 100 px (it’s perfect).
For the mobile version, I added the second code snippet you provided to the style.css file of my child theme, and everything is working perfectly.
I really want to thank you from the bottom of my heart. A huge thank you for taking the time to help me, for finding a solution, and for explaining it to me so kindly. It’s truly wonderful to be able to count on someone so helpful and knowledgeable.
You’re most welcome.
I’m glad we could help.
