Menu dysfunctional on mobile devices

  • Resolved tordan58

    (@tordan58)


    2 years, 8 months ago

    Hi,

    My website is designed with Elementor and the theme is Sydney.

    The menu on my website has an issue on mobile devices. Let me describe the behavior:

    1. Tapping the menu icon opens the menu which is now displayed as an ‘overlay’ on the left side of the screen. Above the menu choices are also displayed the site logotype and an ‘X’. Refer to the attached screenshot from a mobile phone.
    2. Tapping any menu choice will scroll the page to the section as per the links in the menu. The ‘overlay’ with the menu remains open (covering the left-hand side of the screen. In the visible part of the page (not covered by the overlay) you will see that the page is scrolled as it should.
    3. Tapping the ‘X’ to close the menu overlay the page is now scrolled back to the top. So the menu is not usable.

    The behavior is the same in iPhone, iPad, Android phones, and Android tablets. I have checked on various devices and web browsers (Safari, Chrome and Firefox).

    When visiting the website from desktop/laptop the menu behaves as it should, the page is scrolled to the section as per the links defined in the menu.

    Have I missed a setting, somewhere?

    Any guidance on where to start looking is highly appreciated.

    Best Regards,
    Tord Andreasson

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @tordan58,

    I am sorry for the trouble. You could try this custom jQuery code solution:

    (function($){

    if( matchMedia('only screen and (max-width: 1024px)') ) {
        $( document ).on('click', function(e){
            if( !$( e.target ).closest('.menu-toggle').length ) {
                $('.sydney-offcanvas-menu').removeClass('toggled');
            }
        });
    }

})(jQuery);

    You could implement that code to your site with a child theme or use additional plugin. Follow this instructions if you want to use the second option:

    1. Install and activate the TC Custom JavaScript plugin
    2. Go To Appearance > Custom JavaScript
    3. Put code into the provided box
    4. Update

    Please note that you should get the code directly from forum’s thread — not from email. Because what is appearing in email is a bit special and could potentially not bring any effect.

    Thread Starter tordan58

    (@tordan58)

    Hi Kharis,

    I tested the fix you suggested by installing the TC Custom JavaScript plugin, then copying the code from your post, and pasting it as plain text.

    It indeed resolved the issue!

    Side note: when viewing the page on a tablet (iPad) oriented in landscape mode, the menu appears the same way as on a laptop/desktop. In portrait mode, I get the collapsed menu. I suppose that has to do with the screen width being larger than 1024 as per the code? I guess that behavior is OK.

    Again, many thanks for your support and responsiveness, highly appreciated.

    Best Regards
    Tord Andreasson

    Thank you so much for your support, highly appreciated.

    I suppose that has to do with the screen width being larger than 1024 as per the code? I guess that behavior is OK.

    That’s completely fine. The theme is designed like so. You’ll see the mobile menu only when your view port is under 1025px wide.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Menu dysfunctional on mobile devices’ is closed to new replies.