Transparent header on tablet not working

Hi Rikard,

Thanks for your reply.

I tried something like this before and it didn’t work. Now I got it to work with the following code (smaller screens were not affected and screen size 990 px has a transparent bg!):

@media screen and (min-width: 768px) and (max-width: 989px) {
#header {
    background: white !important;
}
}

There are a few things I don’t understand and I hope you can clarify this for me:

1) Why did it suddenly work no longer in the proper way? Is there a bug somewhere?

2) I always use a child theme and put your code in the child style.css. That didn’t work. Then I put it in the theme options > general styling and it worked. Then I took it out of the theme options > general styling again but left it in the child styles.css and it still works. I don’t get why it didn’t work in the child styles.css in the first place but it worked after I inserted it in and deleted it from the theme options > general styling. Is this something that is perhaps being influenced by the settings in theme options > performance? Since that tab was added to the theme options, I regularly have issues with multiple sites with css in the child styles.css that seems not being taken into consideration. It is becoming quite annoying I must confess…

Please advise.

Regards,
Monique

Hi Ismael,

I believe file compression (for CSS and Javascript) is automatically checked after updating the theme to the version that offers these functions? If not, then yes, I must have enabled it ;-)

Ok, I understand the working of it: before making any chances in theme settings and/or extra CSS, I should disable file compression, make the changes and than enable file compression again. I suppose in the last stage I can also check the box to delete old CSS and JS files and click the Save all changes button?

That does not give an answer to my first question yet: I recently updated WP, theme and plugins and suddenly the header in tablet portrait turned grey… I ‘hate’ it when I don’t understand what is happening… Can you also explain this to me please?

Regards,
Monique

Ok, thanks Ismael.

I did not add the code you mentioned. It must come from the theme. In the page I set the header to transparent. In the theme options the header is set to sticky and shrinking.

Perhaps a conflict somewhere?

Best regards,
Monique

Hi Basilis,

Which code do you want me to remove?

1) The code coming from the theme > I cannot remove that…

 #header {
position: relative;
z-index: 501;
width: 100%;
background: transparent;
}

2) Or the code I needed to correct the problem > if I do that the header turns grey again…

@media screen and (min-width: 768px) and (max-width: 989px) {
#header {
    background: white !important;
}
}

I set CSS and Javascript file merging to disable and deleted old CSS and Javascript files.

Regards,
Monique

Hi Ismael,

Yes, that’s what I thought. Good it will be updated in the next version of Enfold.

Can you flag this topic as solved please?

Have a nice day,
Monique