Header not fully transparent

  • Resolved significent

    (@significent)


    3 years, 7 months ago

    I see an exact topic resolved from a couple of years ago, but no detail about the resolution.

    I’ve set up a transparent header but instead of just seeing my site background behind the header, I see my site background with a dark gray tint. I’ve tried manipulating the degree of transparency with this CSS:

    #site-header.transparent-header {
    background-color: rgb(255 255 255 / .1%) ;
    }

    That didn’t work the way I’d hoped. If I set the transparency to 100% the header is no longer transparent at all. Instead, I see a plain gray background. Varying percentages cause the header to get lighter and darker, but never perfectly transparent.

    If I set a background color in Customizing > Header > General. It turns the background gray. (Not overridden by CSS)

    The link I’ve provided, below, is my development environment.

    Please help before I pull all of my hair out.

    Thanks!

    • This topic was modified 3 years, 7 months ago by significent.
    • This topic was modified 3 years, 7 months ago by significent.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Shahin

    (@skalanter)

    3 years, 7 months ago

    Hello @significent,

    Please navigate to Customizer > Header > General at the end of the settings and set the Transparent background. Please check this screenshot: https://i.postimg.cc/R0fhZzF3/image.png.

    You can set something like this: https://i.postimg.cc/65gVN0S0/image.png.

    Hope this helps.

    Best Regards

    • This reply was modified 3 years, 7 months ago by Shahin.
    Thread Starter significent

    (@significent)

    3 years, 7 months ago

    Shahin:

    I had tried modifying that setting. If I make it white, I see a light gray background and no transparency. Clearing the color results in the transparency I have (with the dark gray background).

    https://i.postimg.cc/1XVppFWz/Background-Color.png

    Any other thoughts?

    Thanks!!

    Thread Starter significent

    (@significent)

    3 years, 7 months ago

    BTW, the setting you recommended, rgba(0,0,0,0), resulted in no change. I still had the dark gray tint to the transparency.

    Thread Starter significent

    (@significent)

    3 years, 7 months ago

    This is what I’d like the header too look like:

    https://i.postimg.cc/BZ833hjF/Gridiculous.png

    I was able to set this up in an old theme that hasn’t been supported for over 10 years.

    Shahin

    (@skalanter)

    3 years, 7 months ago

    Hello @significent,

    Please try to set the transparent color on this option: https://i.postimg.cc/yYYQwSty/image.png. If it doesn’t work, then please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

    #site-header.has-header-media .overlay-header-media {
    background-color: rgba(0,0,0,0) !important;
}

    For more information about the CSS/JS code on the customizer, please read this link:
    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, don’t forget to click on the regenerate all assets file and data in Elementor > Tools.

    Best Regards

    Thread Starter significent

    (@significent)

    3 years, 7 months ago

    I tried to set the overlay color to white, black and any other color. That simply overlayed my header image with the color chosen. The default color, rgba(0,0,0,0.3) allowed for the same gray tint header transparency. I had played with this setting before with the same result.

    Then I tried the CSS snippet. That worked perfectly and is now the only CSS I need for the site to be rendered properly. THANK YOU! With this CSS in place, it appears the overlay color doesn’t matter. How did you figure out this would resolve the problem?

    Although wpengine.com, where my site is hosted, does have server caching. I had cleared the server’s cache multiple times as part of my troubleshooting with no effect. I have no cacheing plugin installed.

    I wish I was able to use the Elementor plugin. Early on, when I had it installed, my background image disappeared on each page I edited with it. I couldn’t find a solution to that problem, so I uninstalled Elementor.

    Thanks again for your help.

    Shahin

    (@skalanter)

    3 years, 7 months ago

    Hi @significent,

    You’re welcome. Glad it helped.

    You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
    https://developers.google.com/web/tools/chrome-devtools/
    https://developer.mozilla.org/en-US/docs/Tools
    CSS Tutorial: https://www.w3schools.com/css/

    And for responsive sizes, put your CSS on custom screen size:

    @media only screen and (max-width: 480px) {
    /* put your CSS here*/
}

    Or use between sizes:

    @media (max-width: 960px) and (min-width: 481px){
    /* put your CSS here */
}

    For more information about media queries, please read this article:
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Best Regards

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Header not fully transparent’ is closed to new replies.