Jumping header in mobile views

Hi there, @friech previously helped me with an issue that I had with a sticky header jumping down the page when scrolling: https://theme.co/apex/forum/t/header-issues-with-pro-theme/23593

When we fixed that issue, I hadn’t yet built my mobile headers for smaller screen sizes. Now that I’ve done that, I’m getting the same issue on the smaller screen sizes. I’m sure the fix has something to do with putting in some more CSS with a different media query, but so far I’ve not had any success. Any help would be much appreciated. Image attached of what is happening. The website is www.sageaccountssolutions.co.uk.

Thanks.

Ant

Hi there,

Thanks for posting in.

Could you try changing it to this?

@media (max-width: 979px) {
	.e4681.x-bar.x-bar-fixed {
		top: 0 !important;
	}
	.e4681.x-bar.x-bar-fixed {
		top: 42px !important;
	}
}

And make sure to set it sticky again or else, the class x-bar-fixed will not toggle on.

Thanks!

Hi @Rad

Thanks for coming back to me. I’m afraid that doesn’t appear to have fixed the issue. Might it be a media query thing? As this issue only occurs between smaller to 979px.

Any thoughts?

Cheers,

Ant

Hi again,

Try replacing the previous code with the following code:

@media screen and (max-width: 979px) {
	.e4681-12.x-bar-fixed {
		top: 0 !important;
	}
	.e4681-15.x-bar-fixed {
		top: 42px !important;
	}
}

Let us know how this goes!

Hi @Nabeel, that appears to have done the trick now, thank you very much for the support.

Cheers,

Ant

You are most welcome. :slight_smile:

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