Mobile Menu

I can confirm this issue.

It would be nice to see a feature where the menu closes automatically as well as if closed manually the webpage does not scroll up to the top.

Hi @mediamandan and @hutch79,

Looks likely similar issue like this had been resolved in previous support topic that you can find in this link: https://www.ads-software.com/support/topic/mobile-nav-not-closing-for-anchor-links/.

Have you tried custom code solution mentioned in that topic?

Please let me know if you have and hope that works for you as well. ??

Hi @kharisblank

I just gave the linked topic a look, and it now works partly.

I’m using WP Code to add the following script into the body part.

(function($) {
    'use strict';

    if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
        $('.menu li a').on('click', function(){
            $('.sydney-offcanvas-menu').removeClass('toggled');

        });
    }

})(jQuery);

This works on Desktop devices when I reduce the page with. Only on Mobil devices, it still does not work.

Unfortunately, my understanding of JS, PHP and HTML is non-existent, so I’m clueless what to do.

If you want to inspect the page yourself, here’s the link.
https://karate.qoi.ch

Thanks for your help so far!

Hi @hutch79,

Thank you for getting back.

Upon checking, your one-page menu works correctly. But the close mobile menu button remains jump to the top.

Try this code, that contains additional fix for your second issue.

(function($) {
    'use strict';

    if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
        $('.menu li a').on('click', function(){
            $('.sydney-offcanvas-menu').removeClass('toggled');

        });
        $( document ).on('click', function(e){
            if( !$( e.target ).closest('.menu-toggle').length ) {
                $('.sydney-offcanvas-menu').removeClass('toggled');
            }
        });        
    }
    
})(jQuery);

Thanks for your helpful response. This is indeed an improvement. I was wondering if there is a way to adjust the code to also keep the top menu anchored when the expanded menu closes? Thanks again! I’m a total novice at this, so all of your assistance is very appreciated.

I also just noticed the function does not work if you resize your full desktop window to a smaller width unless you refresh the page (so it’s not dynamic). Then when you resize the page to full screen again (after the refresh), the slider image shifts down about 40 pixels leaving a gap at the top.

• This reply was modified 2 years, 2 months ago by mediamandan.
• This reply was modified 2 years, 2 months ago by mediamandan.

Hey @kharisblank

Thanks again for your response!

The new code now also works on Mobil devices!
I can confirm that it does not work on desktop if you resize the window and don’t reload the page, but this is a small issue, I personally don’t really bother about this.

Maybe this fox could also be included in a future Theme update?

Thanks very much for your help!

Hello,

I have the same problem. I tried this solution https://www.ads-software.com/support/topic/menu-mobile-avec/

Which works good, but when I scroll back on top, menu is still opened. I want menu to close when I click any link.

Any help here please? Thank you
Tomas