Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 4, 2023 at 2:13 am #1400073
    sky19er

    Hey guys, did something happen with the mobile sticky header on a recent update? I use it on most of the sites I do and it seems it’s no longer working on mobile, on any of them (eg https://goodwebworks.com, https://nlsla.org, https://lunchticket.org). Thanks!

    March 4, 2023 at 2:14 pm #1400096
    Mike

    Hey sky19er,
    The Sticky Header option has always been ignored on mobile devices:
    Enfold_Support_514.jpeg
    Perhaps you had used some javascript or css for a sticky mobile header, such as:

    @media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
  .html_header_top.html_header_sticky #top #wrap_all #main {
  	padding-top: 98px !important;
  }
}

    Best regards,
    Mike

    March 4, 2023 at 5:04 pm #1400107
    Guenni007

    there are a lot more css rules to set. All depends first on your header settings. header_meta or not – does the header_meta scroll away on responsive case? ( “Unstick Topbar” ). Then where did your hamburger breakpoint is set? 767 or 989 or something completely different?
    On transparency or glassy headers – do you like to have them transparent or glassy first too or not? …

    see here working examples:
    https://consulting.webers-testseite.de/
    https://basis.webers-testseite.de/

    Edit: you had to change your bg-color for your needs : #376b9e for https://lunchticket.org/
    you can try as starting point:

    /****** sticky header *** responsive case when burger is visible - you had to edit then the media query *************/
@media only screen and (max-width: 989px) {
  
  /******  might be neccessary to set 
    .responsive .avia-svg-logo svg {
      max-width: 280px;
    }
  *******/
  
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }

  /*** if top-bar should be visible on mobile - it will be 110px ***/
  
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 80px !important;
    max-height: 80px !important;
    line-height: 80px !important;
  }
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }  

/***** see comment below ******/
  #top .av_header_transparency,
  #top .av_header_transparency .header_bg {
    background: transparent !important;
  }

/*******   if you do not like to have first transparency then backgound-color 
 * remove the above transparent rule and use this instead : 

  #top .av_header_glassy.av_header_transparency .header_bg {
    background-color: #fff;
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #fff !important;
  } 
**************/

  #top #header.header-scrolled .header_bg {
    background-color: #FFF !important;
    opacity: 1
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
  }
  html:not(.html_header_transparency) #top .header_bg {
    background-color: #FFF !important;
  }
  .responsive.html_header_transparency.html_header_top #top #main {
    padding-top: 0px !important;
  }
  .responsive:not(.html_header_transparency).html_header_top #top #main {
    padding-top: 80px !important;
  }
}

@media only screen and (max-width: 767px) {
/******  again might be neccessary to set - depends on your logo and if you are using a svg
  .responsive .avia-svg-logo svg {
    max-width: 220px;
  }  
*****/
  .responsive #header_meta .sub_menu > ul > li {
    padding: 0 5px;
  }
}
    March 4, 2023 at 5:15 pm #1400109
    Guenni007

    on that page: https://nlsla.org/ you had set the padding-top of #main to zero.
    if the header is sticky you had to change that to 80px as in my code above.

    see above comments on these rules if you like to have background from the beginning.

      #top .av_header_glassy.av_header_transparency .header_bg {
    background-color: #376b9e;
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #fff !important;
  }

    some settings on top might not be usefull for your pages. – but try it first – then we can correct the settings

    PS:
    on that page (nlsla.org) – you have overwritten standard enfold setting ( middle ) : 

    @media only screen and (max-width: 767px) {
  .avia-section.av-minimum-height .container .content {
    vertical-align: top;
  }
}

    but this is not good – because your buttons will be at top in responsive case.

    March 6, 2023 at 7:25 am #1400216
    sky19er

    Oh, wow — my bad; somehow I had it in my head it worked on mobile! Thanks, Guenni — you’re amazing, as always — I’m going to pass on it, for now, but it’s good to know I can try your code if I want, someday! Thanks, guys.

    March 6, 2023 at 1:05 pm #1400239
    Mike

    Hi,
    Glad Guenni007 could point you in the right direction, thank you Guenni007, 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 6 posts - 1 through 6 (of 6 total)
  • The topic ‘sticky header mobile not working’ is closed to new replies.