Removing gray overlay on frontpage header

Is there a way to remove the gray overlay on the headers in the Hestia theme? Our home page header photo in particular would look a lot better without it. I have searched online but can't figure out how to easily do this.

  • Patrick Freitas
    • Staff

    Hi Sawnee Woman's Club

    Hope you are doing well.

    You can add a custom CSS to remove the overlay.

    To remove the overlay we can define the unset

    .header-filter::before {
        background-color: unset !important;

    You can also play with the opacity element making the overlay different, for that just need to edit the CSS, the current one is 0.5.

    .header-filter::before {
        background-color: rgba(0,0,0,0.2);

    To add the Custom CSS you can use the WordPress > Customize > Additional CSS

    You can also define a different colour, to learn more about RGBA

    Let us know if you need any further help on this.
    Best Regards
    Patrick Freitas

  • Sawnee Woman's Club
    • WPMU DEV Initiate

    Thank you for this, you don't know how many hours I had spent trying to figure it out! Unfortunately now that the gray overlay is gone, the menu can't be seen on the home page because the menu font is too light (white). Can you tell me how to fix the menu font color on the home page to darker so that it shows up? I only need the menu font color changed to black on the home page. I am a new user so I hope it is not too complicated!

  • Rupok
    • Support Ninja

    Hi Sawnee Woman's Club,

    Please add the following custom CSS code in Dashboard > Appearance > Customize > Additional CSS section and save:

    .navbar.navbar-transparent {
        color: #000000;

    That should resolve the issue. If not, please let us know. We will investigate further.


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.