Gap below main menu in Edge + IE

Hi Jenny

Glad to hear you’re making progress. How did you remove the spacing? With Page Settings?

Page Settings

Hi, Andrew and thanks for the fast reply. Yes, that’s what I did. And as I said, it worked on the footer (in all browsers, including Edge) but not on the header, which by the way was never a problem in the other browsers.

Thanks for the feedback. Please, send your URL and I’ll take a look. Private Reply checkbox below the comment field.

This reply has been marked as private.

Thanks. Please, start by clearing your cache in the caching plugin being used. Any change? If not, clear the cache again and deactivate the caching plugin, any change then?

Hi, Andrew. Tried clearing all caches and deactivating the caching plugin but with no success. On my first “walk” through the menu, it all looks good, which is an improvement. But once I return to any page, the gap reappears. When I refresh a page, it disappears again, same as before.

So to confirm, you’ve cleared Autoptimize and also cleared and deactivated it and then refreshed the browser a few times and the issue persists?

Which page are you testing?

I can’t test on Edge but ideally you need to open developer tools when the margin is there and open the inspector and click on the header and see what rule the margin is originating from.

https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide

It comes from class = “wrapper-sticky”. When I open a page, the height is 224px (which is too much), and when I refresh, the height changes to 112px.

Thanks. Try adding this to Appearance > Customize > Additional CSS or your own Custom CSS plugin:

/* Header */
.wrapper-sticky[style] {
	height: 112px !important;
}

Thanks, I’ll try it. But I’d feel more comfortable if I could apply that rule to Edge only. Do you know how I can do that? I am fairly certain it’s possible.

Are you viewing your site on a relatively low resolution display/laptop? Does the menu not have enough space on load, is in two lines and then has enough space after load? That is my guess as to what’s happening. The sticky header grabs the height of the element while it’s loading and is doubled up.

You can try this:

@supports (-ms-ime-align:auto) {
	/* Header */
	.wrapper-sticky[style] {
		height: 112px !important;
	}
}

It shouldn’t matter applying the first rule to everything, 112 is the height.

Hi, Andrew. I’ve been looking at the site on a large laptop and an even bigger monitor, so the menu has plenty of space. I’ll try adding the code to my child theme css. Thanks for giving me the ms specific version too.

It works! Thank you for the great advice.