Jumping header in mobile views

[ladybirdenterprises]

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

[rad]

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!

[ladybirdenterprises]

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

[nabeel]

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!

[ladybirdenterprises]

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

Cheers,

Ant

[Prasant]

You are most welcome.