[Resolved] Gap below main menu in Edge + IE

This topic contains 16 replies, has 2 voices, and was last updated by  Andrew Misplon 1 year, 2 months ago.

Tagged: 

  • Author
    Posts
  • #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

    #6632

    Andrew Misplon
    Keymaster

    Hi Jenny

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

    Page Settings

    #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.

    #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.

    #6635

    jennyjenweb
    Participant
    This reply has been marked as private.
    #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?

    #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.

    #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?

    #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

    #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.

    #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;
    }
    #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.

    #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.

    #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.

    #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.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

Scroll to top