Hide mobile menu after click to a menu item

Hi @c0lt,

Thank you for reaching out to us. I am happy to help with your queries.

Please try doing these steps:

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

var sydneyChild = sydneyChild || {};

sydneyChild.onePageMenu = {
 
 init: function() {

   var siteNavigation 	=  document.getElementById( 'mainnav' );

   const offCanvas 	= document.getElementsByClassName( 'sydney-offcanvas-menu' )[0];

   // Return early if the navigation don't exist.
   if ( ! siteNavigation ) {
     return;
   }
 
   const button 		= document.getElementsByClassName( 'menu-toggle' )[ 0 ];
   const closeButton 	= document.getElementsByClassName( 'mobile-menu-close' )[ 0 ];   
   const menu = siteNavigation.querySelectorAll('a[href^="#"]')[ 0 ];
   const mobileMenuClose = siteNavigation.getElementsByClassName( 'mobile-menu-close' )[ 0 ];   
   
   menu.addEventListener( 'click', function(e) {

     e.preventDefault();
   
     button.classList.remove( 'open' );

     offCanvas.classList.remove( 'toggled' );

     document.body.classList.remove( 'mobile-menu-visible' ); 
   
   });
   
   
 }
 
} 

function sydneyChildDomReady( fn ) {
	if ( typeof fn !== 'function' ) {
		return;
	}

	if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
		return fn();
	}

	document.addEventListener( 'DOMContentLoaded', fn, false );
}

sydneyChildDomReady( function() {
    sydneyChild.onePageMenu.init();
} );

4. Update
5. Clear any cache; you may potentially won’t see the changes otherwise.

Let me know how it goes.

P.S.: Ensure you got the code directly from this support thread — not from email, that has been formatted for security reason.

Regards,
Kharis

Hi Kharis

Thank you for the feedback. I did everything step by step including the browser cache clear.

Unfortunatelly it is still the same.

Website:
https://www.mohnfeldgasse.at

In case you want to take a look yourself.

Regards
Christian

Right now I figured out that the below code works:

(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);

It is exactly the code from the first link above but now with the plugin TC Custom JavaScript it works.

The ticket is solved. Thanks!

Hello together,
I’m curious why this extra is necessary and why it doesn’t work by standard with sydney.
@kharisblank Do you know why?

Have a great weekend!