transparent header turns gray on mobile - Support | Kriesi.at

Tagged: Color, header, mobile header, transparent

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

Author

Posts
November 17, 2015 at 8:04 pm #537611

1039 Online
Participant

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?

November 17, 2015 at 8:11 pm #537614
Yigit
Keymaster
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
November 17, 2015 at 8:22 pm #537617

1039 Online
Participant

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.

November 17, 2015 at 8:28 pm #537619

Yigit
Keymaster

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

November 17, 2015 at 8:43 pm #537627

1039 Online
Participant

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

November 18, 2015 at 3:38 pm #538200

Yigit
Keymaster

Hey!

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

Best regards,
Yigit

November 19, 2015 at 12:32 am #538634

1039 Online
Participant

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.

November 21, 2015 at 4:06 am #540055

Ismael
Moderator

Hey!

Great! Glad you figured it out. :)

Regards,
Ismael
Author

Posts

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

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