How to make sticky header full transparent in Mobile and semi-transparent when s

Hello,

I am using a sticky transparent header and when scrolled it turns into semi-transparent color I choosed.. In my page layout; in ”Header visibility and transparency” options : Transparent Header is selected.
This works perfect in desktop.

But in mobile view, I can not achieve this..

Currently in mobile, I can achieve full transparent header with this code only :

@media only screen and (max-width: 767px) {
.header_color .header_bg {
    background-color: rgba(0, 0, 0, 0.0) !important; 
}}

As soon as I remove this code, I see a gray background behind header. And I looked so many solutions here and none worked for me.
The sticky header acts fine when scrolled with semi-transparent color I choose.. But when not scrolled there is a gray background in header..

When I examined the code with chrome inspector, I realized that gray background comes from the below code.
And if I disable – position: static; – the gray background disappears.

@media only screen and (max-width: 767px)
.responsive #top .logo {
    position: static;
    display: table;
    height: 80px !important;
    float: none;
    padding: 0;
    border: none;
    width: 80%;
}

How can I remove that gray background and have transparent header and when scrolled it turns in to semi-transparent color I choose (which works fine at the moment).

Update :

I also realized that, my enfold_child css is not overwriting the styles generated by theme in dynamic_avia folder inside upload.
No matter what I do, the styles inside dynamic_avia folder is showing.

• This topic was modified 6 years, 4 months ago by indurango.