Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 1, 2021 at 5:10 pm #1323174
    slui

    Hi,

    I’ve managed to create a sticky mobile menu but there is massive gap up top on the mobile site using your custom snippets. The gap sits below the mobile menu.

    I’ve looked at this solution: https://kriesi.at/support/topic/mobile-anchors-not-going-to-top-of-page/ and it does not seem to fix this gap.

    I then added: the top:0px into this code:

    /* Sticky header on mobile */
    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    /* Margin top value should be equal to header height*/
    margin-top: 180px;
    }
    .responsive #top #wrap_all #header {
    position: fixed;
    top: 0px;
    }
    }

    Please advise on how to resolve this. All CSS code is in the Theme editor.

    October 2, 2021 at 6:18 am #1323237
    Rikard

    Hey slui,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.responsive #top #main {
    margin-top: 99px !important;
}
}

    Best regards,
    Rikard

    October 2, 2021 at 5:39 pm #1323287
    slui

    Thanks Rikard. That works beautifully.

    October 2, 2021 at 11:44 pm #1323310
    Mike

    Hi,
    Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Sticky Header Mobile – Massive Gap Up Top’ is closed to new replies.