Web Analytics Made Easy -
StatCounter Issue With Responsive Navigation Menu On Android Phone - CodingForum

Announcement

Collapse
No announcement yet.

Issue With Responsive Navigation Menu On Android Phone

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Issue With Responsive Navigation Menu On Android Phone

    Hello All,

    I just setup a Wordpress site as a donation for a local church. Unfortunately the theme that I used was a freebie that the vendor does not provide any support. The theme has a responsive design that works fine on the two devices I have at my disposal, iPhone 6 Plus and iPhone 6 but the pastor of the church has a Samsung Galaxy Prime where the navigation dropdown menu will only present a certain number of items on the screen, but he cannot scroll down to see the rest of the items in the menu regardless of if the phone is in portrait or landscape orientation. I saw the issue first hand.

    What's odd is this seems to only occur from the homepage. If I click on one of the menu items and go into one of the sub pages, the nav menu will show up fully then. I was almost wondering if there is something in the height setting that is limiting the ability to scroll on the homepage. Since I don't have any Android devices I'm not certain if the issue is limited to his device or all Androids. I tried doing some simulations of various Android devices within Chrome's dev tools but everything seems to scroll fine. I know that actual phones can behave differently than the simulations.

    I have a little knowledge of CSS but not a ton. I was trying to go through the attached layout.css file to see if anything stood out but thought I would ask for some help here as well. The link to the website is below.

    Source Church Pittsburgh

    Any insight you could provide would be greatly appreciated.

    Thank You,
    Josh
    Attached Files

  • #2
    My assumption would be that there is an error in one of the media queries, or it is simply just a coincidence. I wasn't able to find an exact error or completely scan the code. I will try to when I get home today.

    I hope this gets resolved ASAP.

    Good luck!
    Riley
    Riley-Shannon.com - My Portfolio
    FraktalServices.com - My Company

    Comment


    • #3
      Originally posted by RShannon1321 View Post
      My assumption would be that there is an error in one of the media queries, or it is simply just a coincidence. I wasn't able to find an exact error or completely scan the code. I will try to when I get home today.

      I hope this gets resolved ASAP.

      Good luck!
      Thanks for your reply. I don't think it was a fluke as he said he had tried it a few days prior to showing me and it failed to work. Basically clicking the nav button caused the menu to appear but without any way to scroll down to view all the menu items. It looks like responsive_480 is being triggered correctly, but I don't see anything in here that would control scrolling behavior. I expected to see something like the overflow-y property but apparently not.

      Code:
          .responsive_480 #main-nav {
            display: none; }
          .responsive_480 .nav-wrapper {
            background: #38a1d2;
            padding-top: 24px; }
          .responsive_480 #mobile-nav {
            width: 100%;
            display: block;
            padding-right: 76px; }
            .responsive_480 #mobile-nav ul li {
              display: block;
              margin: 0; }
              .responsive_480 #mobile-nav ul li a {
                padding: 12px 4.16667%;
                border-radius: 0; }
                .responsive_480 #mobile-nav ul li a.w-sub:before {
                  display: none; }
              .responsive_480 #mobile-nav ul li ul {
                width: auto;
                display: block;
                position: relative;
                background: transparent;
                margin-top: 0;
                padding: 0;
                border-radius: 0; }
                .responsive_480 #mobile-nav ul li ul:before, .responsive_480 #mobile-nav ul li ul:after {
                  display: none; }
                .responsive_480 #mobile-nav ul li ul li {
                  display: block; }
                .responsive_480 #mobile-nav ul li ul a {
                  color: #fff;
                  border-radius: 0;
                  padding-left: 8.33333%; }
                  .responsive_480 #mobile-nav ul li ul a.w-sub:before {
                    display: none; }
                .responsive_480 #mobile-nav ul li ul ul {
                  top: auto;
                  right: auto;
                  left: auto;
                  display: block; }

      Comment


      • #4
        So after some more testing, I found that the issue only occurred on the native Android browser or Chrome. Firefox on Android did not exhibit the issue. I added overflow-y: scroll; to the media query that controls the responsive behavior for smart phone resolutions and this fixed the problem. The updated query looks like the following:

        Code:
          .responsive_480 #mobile-nav {
              width: 100%;
              display: block;
              padding-right: 76px; 
              overflow-y: scroll; }
        This leads me to believe that my initial thought that the fixed height image on the home page was not allowing the menu to be scrollable on Android. Apparently Safari and Firefox handled the scenario differently than Chrome.

        Comment


        • #5
          It's showing multiple scrollbars here in Chrome at test sizes, and performs as you said on both my android devices, and that's consistent with that type of full-screen covering background rubbish and bootstrap butting heads. When you try to scroll Android gets confused and doesn't know which scrollbar to scroll...

          Really though this is the type of problems these arsty fartsy scam artists off the shelf templates saddle you with. They're a laundry list of how not to build a website with their endless pointless scripts, endless pointless multiple stylesheets, endless pointless static style in the markup, endless pointless DIV for nothing, endless pointless classes for nothing -- it's hardly a shock the home page ends up a massively ridiculous 37k of markup when it has no content images and only 1.87k of plaintext; easily four to six times the code that should be present in the HTML alone. You figure in the massively bloated 284k of CSS spanning 11 files and 384k of JS spanning 22 files on a site that has no excuse to have more than 64k COMBINED in three files of HTML+CSS+SCRIPTS.

          ... and that's before we talk the accessibility woes that make it a giant middle finger to users.

          You've been duped by the lie that is off the shelf templates, "wordpress is easy", and all the other fly-by-night garbage that puts the saddles on nubes and take them for a ride. A client came to me with that, I'd tell them to pitch the entire mess in the bin and start over clean, as there's NOTHING in there I'd try to salvage.
          Walk the dark path, sleep with angels, call the past for help.
          https://cutcodedown.com
          https://medium.com/@deathshadow

          Comment

          Working...
          X