Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 28, 2018 at 4:40 pm #978948
    yourcloudworks

    Hello

    I have the header setting for the home page to be ‘invisible and appears on scroll down’. The first element on the page is a color section with a background image. However, when viewing on a mobile the header and top bar appear above the color section. How do I get the ‘Header is invisible and appears once user scrolls down’ to apply on mobile devices?

    Thanks

    June 30, 2018 at 10:37 pm #979646
    Mike

    Hey yourcloudworks,
    Try this code in the General Styling > Quick CSS field or in WordPress > Customize > Additional CSS:

    @media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed !important; 
  }
.responsive #top #wrap_all #header.av_header_transparency {
    display: none !important;
}
}

    If you feel that the header show too sharply and would like a little animation to have it fade in on scroll, try this code instead:

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

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

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

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

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

    Best regards,
    Mike

    July 3, 2018 at 12:14 pm #980517
    yourcloudworks

    Hello

    Thank you for this. I have applied the first suggested CSS, but the logo and menu bar has not changed on the homepage (on mobile). Are you able to take a look?

    Also only want this to apply to the homepage, as this CSS is creating a sticky header on all other mobile pages. This means that the logo and menu bar sits on top of the banner image.

    July 3, 2018 at 1:06 pm #980537
    yourcloudworks

    Hello again. I have removed the CSS due to the issue described on the other pages.

    If you could suggest another way to make the menu/logo bar on the homepage (on mobile view) show only on scroll, without creating a sticky header , or having an affect, on other pages, that would be appreciated.

    July 4, 2018 at 3:35 am #980880
    Mike

    Hi,
    To have this only effect your homepage, you would need to add the page ID to the css rules, like this:

    @media only screen and (max-width: 767px) {
  .responsive #top.home #wrap_all #header {
    position: fixed !important; 
  }
.responsive #top.home #wrap_all #header.av_header_transparency {
    display: none !important;
}
}

    Best regards,
    Mike

    July 5, 2018 at 10:15 am #981488
    yourcloudworks

    Hello, thank you for this. I have added it to the Quick CSS but it doesn’t appear to have made a difference to the home page, are you able to take a quick look please?

    July 6, 2018 at 1:30 am #981783
    Mike

    Hi,
    I have checked, and on the homepage the header shows only after scroll, just like the desktop view of the homepage, and this only happens on the homepage. On the other pages the header shows on page load and then moves up out of view on scroll.
    Please see screenshot in Private Content area.
    Is this what you wanted?

    Best regards,
    Mike

    July 6, 2018 at 10:44 am #981970
    yourcloudworks

    That has now taken effect, this is exactly what we were after, Thank you for all your help!

    July 6, 2018 at 11:54 am #981999
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Header on mobile view’ is closed to new replies.