Support/Ultra Theme/Gap below main menu in Edge + IE

[Resolved] Gap below main menu in Edge + IE

Tagged: 

  • Author
    Posts
  • May 11, 2017 at 4:51 pm #6631

    jennyjenweb
    Participant

    I followed your advice to the user: provwp about how to remove spacing above the footer. It worked like a charm; I am delighted. However, I still have a problem with a gap between the main menu and the content in Edge & IE, regardless of the template. The layout is fine in Chrome, Firefox and Opera.

    In Edge, the gap generally appears when I open a page, but disappears again when I refresh the page.

    Any ideas?

    Thanks.
    Jenny

    May 11, 2017 at 4:53 pm #6632

    Andrew Misplon
    Keymaster

    Hi Jenny

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

    Page Settings

    May 11, 2017 at 5:07 pm #6633

    jennyjenweb
    Participant

    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.

    May 11, 2017 at 5:11 pm #6634

    Andrew Misplon
    Keymaster

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

    May 11, 2017 at 5:14 pm #6635

    jennyjenweb
    Participant
    This reply has been marked as private.
    May 11, 2017 at 5:17 pm #6636

    Andrew Misplon
    Keymaster

    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?

    May 11, 2017 at 5:45 pm #6637

    jennyjenweb
    Participant

    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.

    May 11, 2017 at 5:53 pm #6638

    Andrew Misplon
    Keymaster

    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?

    May 11, 2017 at 5:55 pm #6639

    Andrew Misplon
    Keymaster

    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

    May 11, 2017 at 6:12 pm #6640

    jennyjenweb
    Participant

    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.

    May 11, 2017 at 6:19 pm #6641

    Andrew Misplon
    Keymaster

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

    /* Header */
.wrapper-sticky[style] {
	height: 112px !important;
}
    May 11, 2017 at 6:34 pm #6642

    jennyjenweb
    Participant

    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.

    May 11, 2017 at 6:52 pm #6643

    Andrew Misplon
    Keymaster

    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.

    May 11, 2017 at 6:54 pm #6644

    Andrew Misplon
    Keymaster

    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.

    May 11, 2017 at 7:36 pm #6645

    jennyjenweb
    Participant

    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.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 17 total)
1 2

You must be logged in to reply to this topic.

Scroll to top