Help with transparent header on mobile

Hello all, I’ve encountered a problem while fixing some things on my website since I’ve imported a demo without backup.

Now, the slider header only shows half on mobile. I’ve attached a picture. I know this is occurring probably because of transparent header being turned on. Is there a way to keep transparent header on in desktop version and have it not being cut like the picture below on mobile? I’ve linked my website below as well. Thanks.



The slider doesn’t seem to be covered by the header (unless the page has scrolled) but I do see that if I refresh then occasionally the page scrolls a little all by itself and the swiper slides a little way under the header although you can just slide it back down.

In the devtools console there are a number of errors such as swiper not defined and some font files missing so I would look at fixing those first as this doesn’t seem to be a css issue.

Uncaught ReferenceError: Swiper is not defined

The height of the swiper is controlled here.

@media screen and (max-width: 736px) {
	#page-slider .swiper-slide {
		height: 40vmin !important;

You can make it bigger by increasing the height but that won;t stop the strange scroll effect on page load which is probably caused by one of your scripts malfunctioning. If you can fix those issues and the problem still occurs we can take a look again :slight_smile:

Hey Paul.

I’ve tried to use your script and added it to my CSS. However it didnt move anything at all sadly :(.

Sorry I may have been a little unclear.:slight_smile:

The css I posted is your original unchanged CSS. I was just pointing out that the height of the slider on small screens is controlled by that rule. If you wanted to make the slider taller then you would increase the 40vmin to something greater

However as I suggested above the first thing you need to try is to fix the script errors. as that may be causing the jumping issue.

Here’s a screenshot of the errors I see ion the console.

Even if they aren’t the cause of the problem they need to be fixed so that debugging can take place properly.

It’s highly unlikely that the issue is a CSS issue causing the jump.

Hello, try to import demo with backup. You can get support from Theme support also.

I’m suffering from the same problem in my WP, but when i import demo with full backup then my problem resolved as well as I’m facing problem in footer section also but import full backup solves all my problem and theme now working fine.

Hello, recently I had imported a demo. However it messed up my site more than it helped sadly. I’m not sure how that works therefore I’ve edited everything back to normal manually.

Hello. Thank you. I’ll try to fix the errors ASAP and I’ll come back again. :slight_smile: Thank you

Hello you can go to THEME SUPPORT page of contact them, because if importing demo would be difficult so you have to contact their :slight_smile: Thank You and sorry if my solution will waste you time and efforts.
Thank you and i hope your problem would be solved easily.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.