Home Forums Weaver Xtreme Theme Making my site mobile-friendly in 12 not-so-fun steps

Topic Resolution: Answered
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #64225
    Answered
    PolyWogg
    Participant

    I have a question about a mobile-friendly menu, but I will explain what else I’ve done in case it screwed something up.

    I’ve been working to improve a bunch of stuff on my site, some of which I was doing for me and aesthetics, some for performance, and some to respond to a few users who have noted in the past month that my website (http://polywogg.ca) is not particularly mobile-friendly. TBH, that never used to be a major concern for me…back in the day when you could only really install a separate mobile theme, I never did. Most of my content is not easily digestible that way and most of the people coming to my site are more interested in one particular download than the prose of the blog, and do so on desktops with printers (Okay, Boomer!). I moved to a responsive theme when available and called it done.

    However, I wanted to make it more mobile-friendly and came up with 12 steps in 3 stages of completion, most of which have some link to tweaking a theme element or two:

    1. DONE:
      1. Responsive theme
      2. Mobile friendly font, minimum 16px
      3. Standard caching and optimization
    2. IN PROGRESS:
      1. Rework use of FI and a calendar graphic I use on desktop for phone and tablets — almost done (thanks Scrambler!)
      2. Standardize size of all FIs to set 150×150 size
      3. CDN caching (likely Jetpack)
      4. Reduce the use of large tables
      5. Write shorter posts
      6. Improve shareability across social media through layout improvements
    3. NO CLUE:
      1. Implement AMP from Google — ?
      2. Use a responsive menu — ?
      3. Formal benchmarking / testing  — ?

    It is the last three where I am running into issues.

    IMPLEMENT AMP — This seems to be built into the core now, I haven’t figured out if this is still needed and if I have to do anything with the theme. I think *not* but would like confirmation.

     

    RESPONSIVE MENU — When I use my existing menu from my standard desktop, and pull it up on my phone, the LEVEL 1 list shows fine, I only have 9 items. I can even scroll up and down a little bit (until menu toggle hits the top of the screen). When I pull down Level 2, some are okay if they are near the top, but if they are near the bottom, or I choose Level 3, the sub-elements go past the bottom of the screen, and I can’t scroll down. I thought installing a responsive menu would work like the old idea of running two themes (desktop and mobile) so that when I was on my desktop, I would get my regular menu but when I was on my tablet or phone, it would give me the mobile-friendly menu. I tried doing it with Mega Menu, but it seems to want to just completely replace my default Weaver theme menu even on my desktop.

    Am I understanding how responsive menus work? Do I have to replace my default menu with one that works on both or can I have two versions? Or is it possible just to “fix” the Weaver Menu so that I can scroll?

    Here is the image from my phone – if I pull down  GALLERY / 2008, it will show me the first three sub-options, but the next ones in that sublist are too far down and I can’t get to them.

    http://polywogg.ca/menu-too-big/

     

    TESTING:

    I ran the Google Mobile Friendly test on their site, and it passes as mobile-friendly (yay). But are there other benchmarks that the theme developers use that I should be testing too? Or do I just say “it passed”, moving on, yet the menu doesn’t work yet…

     

    Paul

    #64229
    Best Answer
    scrambler
    Moderator

    This reply has been accepted as the best answer.

    I am not familiar with AMP, so I can help with that, may be @weaver will know more on that.

    For the menu, the problem is linked to the fact that the menu is fixed on top and that is what is preventing the scrolling.

    So the solution is to unfix the menu on mobile, which is explained in the guide article below, in the “unfixing on mobile” section

    https://guide.weavertheme.com/menus-alternate-transition-for-fixed-on-scroll-menus/

    Using the CSS rule provided below you can unfix on either phone only of both phone and tablets

    #64248
    PolyWogg
    Participant

    I was dreading this one after our marathon on the calendar and stuff. But I thought I would peek at it before going to bed. One code segment to “drop in” and it works perfectly on my phone:

    /*Unfix the menu to allow scrolling on phone*/
    .is-phone .wvrx-fixedtop, .is-phone .wvrx-fixonscroll {
    z-index:998;
    position:relative !important;
    top:auto !important;
    }
    body.is-phone {margin-top:0px !important}

    Heck, I’ve even started writing comments to myself in the CSS like a proper documenter so I know what the heck it’s there for later!

    Paul

    #64249
    PolyWogg
    Participant

    Tip jar charity / donation done! Thanks Scrambler. 🙂

    P.

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