Menu not scrolling—Android 7.x

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, 3 months ago by blaircomm.

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