Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #837692

    The menu is n ot scrolling on Android phones. I haven’t tried it on iPhones or iPads yet, (but I will as soon as I have time.) This is a new issue—Aug. 2017. Running the latest Enfold version—4.1.2. Android 7.x. Phone is Samsung Galaxy S8+.

    Have this custom code in place:

    #advanced_menu_toggle, #advanced_menu_hide {
    position: fixed;
    right: 3%;
    top: 5%;
    }

    @media only screen and (max-width: 900px) {
    #wrap_all {overflow: hidden !important; /*needed for mobile menu scrolling */}
    }

    Worked before, not now. I cannot see any solutions in other posts—and the above seems to be all I find.

    ALSO: There are no longer arrow icons to reurn to top on mobile. User cannot navigate easily and has to manually scroll all thriough each deep page—which they will not do and leave the site. Can this be fixed?

    Can you help this issue? It is essential to mobile. I have several sites with Enfold, many are client sites. I have not chjecked them yet and I have not heard from any clients yet.

    Thanks.

    — Michael

    • This topic was modified 7 years, 4 months ago by blaircomm.
    #838139

    Hey blaircomm,

    Could you try to remove that custom CSS to see if that helps? We’ve had no other reports of this being a problem on the latest release so I think it’s something local on your installation.

    Best regards,
    Rikard

    #838879

    Hi:

    Thank you for your response. The custom CSS makes no difference in or out. I have set up a dev site and will test all the plugins—though I hate doing it. Meanwhile, here is some ofher data:

    – The menu problem is on both Android and iPhones—but in smartphone size only.
    – Tablets work fine over 765 px. At 765 the menu changes and no longer sticks to the top with scrolling, plus loses the transparancy option and the shrinking action. iPad Air for example works fine. It is completely a smartphone issue below 765 px.
    – In the “HEADER” section under the Enfold menu, these dialogs show that the “sticky header” is ignored on smartphones:

    Sticky Header
    If checked the header will stick to the top of your site if user scrolls down (ignored on smartphones)
    Shrinking Header
    If checked the sticky header will shrink once the user scrolls down (ignored on smartphones + tablets)

    Both these are checked. Perhaps this code is preventing the custom CSS from working by overriding on smartphones below 765px? Can this be the case?

    Again, tablet sizes work fine, but smartphone sizes do not. And the social icons dissappear, clearly there is code defining a different menu for smartphones below 765px. For some reason the custom CSS is not overriding this.

    /* —- KEEP MOBILE MENU VISIBLE SCROLL —- */

    #advanced_menu_toggle, #advanced_menu_hide {
    position: fixed !important;
    right: 3% !important;
    top: 5% !important;
    }

    @media only screen and (max-width: 900px) {
    #wrap_all {overflow: hidden !important; /*needed for mobile menu scrolling */}
    }

    /* —- END KEEP MOBILE MENU VISIBLE SCROLL —- */

    I will let you know if I find anything in the plugins—and I can give you access to the dev site if you like.

    Thanks.

    — Michael

    • This reply was modified 7 years, 4 months ago by blaircomm.
    #839031

    OK. I have had a chance to test out a dev site with all plugins disabled. The same sitution occurs on both Android and iPhones.

    I have made a temp user for you to access the site and see if you can understand this behavior. (See private content.)

    There are no alterations to Enfold other than the plugins installed. No code changes at all. All plugins were disabled and the non-scrolling behavior on smartphones was the same.

    I hope you can gain some insight into this so we can fix it.

    Thank you.

    — Michael

    #839654

    I have managed to figure out the CSS that makes it all work on both Android and iPhone. Something changed on some update somewhere since all this was not needed before. It may be a little heavy, but it seems to work across devices just fine. I didn’t want you to have to look into it if it’s now working. Thanks.

    /* ---- KEEP MOBILE MENU VISIBLE SCROLL ---- */
    
    #advanced_menu_toggle, #advanced_menu_hide {
    position: fixed !important;
    right: 3% !important;
    top: 5% !important;
    }
    
    @media only screen and (max-width: 900px) {
       #wrap_all {overflow: hidden !important; /*needed for mobile menu scrolling */}
    }
    
    @media only screen and (max-width:767px) {
      .responsive #top #wrap_all #header {
        position: fixed !important;
      }
      .responsive #top #main {
        padding-top: 80px !important;
      }
    }
    
    @media only screen and (max-width: 767px) {
    #top #menu-item-search {
    display: none;
     }
    }
    
    @media only screen and (max-width: 767px) {
    .main_menu{ right: -5px !important;}
    }
    
    @media only screen and (max-width: 767px) {
    #top .social_bookmarks { display: none !important; }}
    
    /* ---- END KEEP MOBILE MENU VISIBLE SCROLL ---- */
    #840391

    Hi Michael,

    Glad you got it working for you! And thank you for sharing! :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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