How to prevent the transparent header on mobile to transform into normal header?

Hi Basilis,

It is nothing extremely specific. In fact you can try and inspect this behaviour on any of your enfold testing installation with an active transparent header. The header will transform to basic style (white or whatever it is set to) when you scroll down. What I need is to prevent this behaviour – the header transformation and leave it transparent. If it is possible with css, I can set media rule to limit that transformation prevention on mobile screen only.

Regards

I have attached the link to a website with transparent header. You can try to resize the browser and scroll down a bit and you will see that the header on mobile screen width is transforming from transparent to regular header and pushing the fullscreen slider below, which I would like to prevent.

Hi Yigit,

In fact this is not an issue with any plugins. It is a default behavior how the Enfold theme header on mobile is working. Add the custom CSS I`ve posted on the first post on any Enfold site that is using a full-screen slider with transparent header. You will see what happens when you scroll down a bit.

Regards

Hi Ismael,

The purpose of the CSS is to set the header on mobile transparent with white (transparent header) logo. To check this:
1 you have to create a page with full-screen slider;
2 set the page header to transparent;
3 add the custom CSS

Then you can go and check the transparent header on mobile screen width. Scroll down a bit and you will see that the header is transforming to standard header. I want to prevent this transform on mobile and leave the header transparent. The reason for this is because the standard header is pushing the full-screen slider and its contents below the header. This results in wrong function of next section and doesn’t look good.

Regards

Hi, Ismael!

I attached everything I have set in the private area. Let me know if that will be sufficient for you to replicate the issue.

Regards

I found that this behaviour is done by the code between lines 1654 and 1662 in enfold/js/avia.js :

if(transparent)
                {	
                	if(st > 50)
                	{	
                		//header.removeClass('av_header_transparency');
                		av_change_class(header, 'remove', 'av_header_transparency');
                	}
                	else
                	{
                		//header.addClass('av_header_transparency');
                		av_change_class(header, 'add', 'av_header_transparency');
                	}
                }

Can we set a function to override the av_change_class(header, 'remove', 'av_header_transparency'); and keep the av_change_class(header, 'add', 'av_header_transparency'); for screen width under 767px?

Regards

Update:

I edited the code by changing the line from ‘if(st > 50)’ to ‘if(st > 50 && window.innerWidth >767)’ and now it works, the only thing is how to keep this code when updating theme?

if(transparent)
                {	
                	if(st > 50 && window.innerWidth >767)
                	{	
                		//header.removeClass('av_header_transparency');
                		av_change_class(header, 'remove', 'av_header_transparency');
                	}
                	else
                	{
                		//header.addClass('av_header_transparency');
                		av_change_class(header, 'add', 'av_header_transparency');
                	}
                }