Transparent Header on Mobile doesn´t work on 4.5

Thx for your answer, with this code the header background is now transparent, but the content do not slip behind it.
How can i fix that, i get the transparent header and the first content (Layerslider) is shown behind as in desktop screen?

Hey Jordan,

on your picture, it is showing correct.
But not on my iPhone

https://www.dropbox.com/s/3inzsuypqludm4i/IMG_4660643311C7-1.jpeg?dl=0
Here is my Screenshot.i Had add your quick css.

And can you say me, why the burgermenu button and the search button is not white?

regards dandy

I added the code at the top, but it doesn´t change anything

Hello Isamel,

thx for your answer,i use now this code:

### Transparentes Mobile Header # Menuefarbe # Transparent Logo ###{}
@media only screen and (max-width: 989px)  {
#header{
background:none!important;
}
.responsive #top #main {
    margin-top: -80px;
}
#header_main{
background-color: rgba(255, 255, 255, 0.0)!important;
}}
@media only screen and (max-width: 989px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { color: white; }
}
@media only screen and (max-width: 989px) {
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
    opacity: 0 !important;
}
.responsive #top .av_header_transparency .logo img.alternate {
    display: block !important;
}
.responsive #top .header_color #header_main {
    border: none;
}
}
### Transparentes Mobile Header # Menuefarbe # Transparent Logo ###{}

For the smartphones, this is now working with your code:

.responsive #top #main {
    margin-top: -80px;
}

but not for tablet responsive. Can you help me please to fix this, too?

You can see in my code that i changed the search and burgerbutton to color white, but this is not working on transparent header.
Which code works to change the color of these symbols in enfold 4.5?

regards dandy

• This reply was modified 6 years ago by Dandy.

Hello Ismael,

thx for your answer.

now i have two problems.
When i go to a site which transparent header is not active, than the burgermenu is white, too. So i do not see my burgermenu on normal header, because headercolor is white. How can i change this, that the burgermenu is only white on transparent header (link in private section)?

and my second problem is with upward the content on transparent header. I got this code from you:

.responsive #top #main {
    margin-top: -80px;
}

to move the content on transparent header upwards. This works only on smartphone responsive. On tablet responsive it doesn´t work.

Can we fix this two problems?

regards dandy

@ismael

can you please help me to fix it?

Hello Ismael,

you understand me wrong. On smartphone responsive it does work.
On Tablet responsif from 768 to 989 it doesn´t work.

http://quirktools.com/screenfly/#u=http%3A//dengler-cnc.de&w=768&h=1024&a=22&s=1

here you see, when tablet is select that the content does not swap upwards. On smartphone its working perfect.

• This reply was modified 6 years ago by Dandy.

I have set this

@media only screen and (max-width: 989px) {
.responsive #top #main {
    margin-top: -80px;
}
}

because my responsive ends on 990px but this does not work.
It swap upwards to 767px
but not from 768 to 990 and i do not find the problem why this will not work on tablet responsive.

no i do not use compression settings in Enfold.
and i flush tha cache many times.

Here is the login.

i have deactivated the w3 total Cache Plugin, but it will not work, too,

Good Morning Ismael,
i changed now but still not work on tablet, only on Smartphone with the swap upwards content :-(

Hello Ismael,

thx for your help.
i Changed the margin-top to -90px because on tablet the 85px was not enough an we got 5 px transparent background.

Now its working perfect.

THX !

regards Dandy