Mobile menu fails with anchors

  • I am creating a “singlepage” homepage with the Sydney theme v1.84 using anchors – but when clicking a link in the menu in the mobile version, the menu doesn’t collapse. It stays open and covers the entire content – and makes it unusable.

    I tried collapsing/removing the menu by adding this onclick eventlistener on menu links, but that doesn’t seem to work:

    jQuery(document).ready(function($) {
    $('body .menu-item a').on('click', function() {
             $("body").removeClass('mobile-menu-visible');
    })
});

    Anybody has a proper solution for this problem?

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

  • Hi @gadehans,

    Please emove that additional code. And do 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 menuItem = siteNavigation.querySelectorAll('a[href^="#"]')[ 0 ]; 
   
   menuItem.addEventListener( 'click', function(e) {
   
     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 and run your test with restarted web browser

    Let me know how it goes.

    Regards,
    Kharis

    Thread Starter gadehans

    (@gadehans)

    Hi Kharis

    Thank you. Nice work. It works well – except for submenu’s! I guess maybe the submenus are initially set to display=hidden and are not selected in this code:

    const menuItem = siteNavigation.querySelectorAll(‘a[href^=”#”]’)[ 0 ];

    same problem here, tried the js solution to no avail.
    Wp+WPML+Sydney free theme I just can’t get anchors to work for the mobile menu…
    Any help would be very apreciated.
    Thank you in advance

    I have same issue but it did not work.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile menu fails with anchors’ is closed to new replies.