Header issues with Pro Theme

[ladybirdenterprises]

Hi there, I have a few issues with the header in Pro theme that I’m looking for help with. It’s two things that I just can’t figure out, I’ve tried reading around the support forums, but I can’t seem to find similar issues. I do hope you can help me. The site is live, so you can see all the issues here: https://www.sageaccountssolutions.co.uk/sage-software-and-stationery/

1. Strange header movement when scrolling - I have two fixed bars at the top of the page. The first one is a green bar with the phone number and contact details on. The second is the navigation bar. When you start to scroll down the page, the navigation bar disappears briefly under the green one and makes it look like it is flickering. It bothers me and I’d like to correct the issue please.

2. In Internet Explorer (not that I ever use it) the top green bar content is all shifted to the right and, depending on the size of the monitor, goes off of the page. - I have IE11 installed on my machine. It works fine in Chrome and Edge, just not IE.

Any help on these two topics would be very much appreciated.

Cheers,

Ant

[christian]

Hey Ant,

1. Regarding the weird movement, please try setting Trigger Offset to a negative value. Here’s an example https://youtu.be/lIr_HloR45g

2. Please give us the login URL of your site and WP Admin credentials so we could check your setup and try to replicate it on our end to discover if this is a bug. I’ve tried discovering the cause of the issue but IE is hard to debug.

Thanks.

[ladybirdenterprises]

Hi Christian, thank you for the response. The Trigger Offset fixed the first problem instantly, which was great, thank you. The second issue seems to be getting worse as IE now no longer allows the navigation to be sticky, even though Chrome and Edge are fine. I’m using IE11. I’ll provide login details on a private message in a tick.

Whilst I have you, I also have a new issue with me header at mobile size. I’ve used the hide at breakpoints options to show a new header when the viewport becomes a certain size, but for some reason, my new header bars, after scrolling a bit are jumping down the page (see attached image), any ideas here please?

Cheers,

Ant

[friech]

Hi There,

Thank you for the credentials, please inspect your bars and define a Content Length in % as often times IE does not know how to handle the auto value.

The sticky bar on mobile is a known issue with IE, you can add the custom CSS below to Theme Options > CSS for a quick fix.

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

Cheers!

[ladybirdenterprises]

Thank you Friech, that successfully solved all of my issues. Much appreciated.

Ant

[Joao]

Glad to hear it