Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #537611

    For the pages of a website I have the header set to transparent or transparent and glassy. It looks like Enfold automatically turns off the transparency of the header on mobile. That’s okay. However, the header is gray on mobile, specifically, the color #999999. I looked in the General Styling section of the Enfold settings and did not see anything set to #999999. How can I make the header white on mobile devices?


    Hi 1039 Online!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency {
        background-color: transparent;
        position: absolute!important;



    Yigit, thanks for the quick reply. That CSS works in making the header transparent. However, in this case, I don’t want the header transparent because the logo takes up much of the header space on the phone. I would like to be able to control the color of the header–in this case, to make the header white.



    Can you please remove the code i posted previously and post a screenshot and show the changes you would like to make? When i remove the code using developer tools, header background is white.




    Here are some screenshots from a desktop monitor. The gray in the first screenshot is similar to what is on my phone.

    Gray Header when screen sized narrower.
    Transparent header when screen wider.
    White header when screen wide enough and scrolled down a little.



    I cannot reproduce the issue on my end. Which browser and OS are you using?

    Best regards,


    The issue occured on both firefox 42.0 and chrome 46.0.2490.86 m, as well as in my android device. However, it was not occurring on the home page, which had its header set to “transparent.” It was occurring on other pages where the header was set to “transparent and glassy”. I had been using some code to change the color of the “glassiness”: `
    #top .av_header_glassy.av_header_transparency #header_main {background-color: rgba(0,0,0,0.4) !important; } `

    To solve the problem, I made this modification: `
    @media only screen and (min-width: 767px) {
    #top .av_header_glassy.av_header_transparency #header_main {background-color: rgba(0,0,0,0.4) !important; } }

    That seems to have solved the problem. Thanks for looking into this. You can close the ticket.



    Great! Glad you figured it out. :)


Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘transparent header turns gray on mobile’ is closed to new replies.