Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 13, 2018 at 4:10 pm #1021060
    june

    Hi
    Is there a setting to make the mobile header ‘sticky’? So when you scroll the header stays at the top?
    Thanks for letting me know.
    June

    October 13, 2018 at 7:26 pm #1021089
    Mike

    Hey june,
    There is not a setting to make the mobile header sticky, but if you include the code in the General Styling > Quick CSS field from our documentation it will work: Sticky header on mobile

    Best regards,
    Mike

    October 16, 2018 at 6:24 pm #1022304
    june

    Thank you Mike, that does not work fully.
    I put in the code below and adjusted the margin to zero actually otherwise space is added at the top. The header stays sticky, but it sits on top of the slider. Is there a way to push the content below down so it’s all visible?

    /* 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;
    }
    }

    October 17, 2018 at 4:29 am #1022521
    Mike

    Hi,
    I see, perhaps in your situation a sticky header that fades in on scroll would be better?
    Please give this a try, and see if you like it:

    @media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed !important; 
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera */
       -moz-animation: fadein 1s; /* Firefox */
        -ms-animation: fadein 1s; /* Edge */
         -o-animation: fadein 1s; /* Opera */
            animation: fadein 1s;
  }
.responsive #top #wrap_all #header.av_header_transparency {
    display: none !important;
}
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Edge */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

    Best regards,
    Mike

    October 17, 2018 at 2:21 pm #1022775
    june

    Hi Mike

    I personally like this. The site is not for me though. I will check and see.

    June

    October 18, 2018 at 12:28 am #1023057
    Mike

    Hi,
    Thanks, we will leave this open to hear back from you.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.