Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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?

    #537614

    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;
    }}

    Cheers!
    Yigit

    #537617

    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.

    #537619

    Hey!

    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.

    Regards,
    Yigit

    #537627

    Yigit,

    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. http://prntscr.com/93v2ky
    Transparent header when screen wider. http://prntscr.com/93v2ss
    White header when screen wide enough and scrolled down a little. http://prntscr.com/93v467

    #538200

    Hey!

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

    Best regards,
    Yigit

    #538634

    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.

    #540055

    Hey!

    Great! Glad you figured it out. :)

    Regards,
    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘transparent header turns gray on mobile’ is closed to new replies.