Docs

[maxg10]

Hey I am using renew stack, and I have setup some sub menu items, they work perfectly on a desktop machine or a laptop. However on a mobile device, phone or tablet the top level menu shows up fine but the submenu items do not open up when you click on the down arrow, it just takes you to that top level section. I guess it will be some custom CSS or Jqurey script that will be needed to fix this. Can you please help?

[Paul R]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[maxg10]

This reply has been marked as private.

[maxg10]

Also on mobile devices, when you click on the burger menu icon, the menu does not close once you have selected the link you want to go to. Any help with this would also be greatly appreciated.

Thanks
Max

[Rupok]

Hi Max,

Please update your theme to latest version first and check again. Are you using any custom script?

Thanks!

[maxg10]

This reply has been marked as private.

[Paul R]

Hi Max,

You can try adding this in your custom css.

@media (max-width: 979px) {
.x-sub-toggle>span {
       width: auto;
       right:10px;
}

.x-sub-toggle {
    width: 100px;
}
}

The code widens the touch area to trigger the submenu.

Hope that helps

[maxg10]

Hi thanks for the quick response.
That has not worked. The submenu still does not drop down, and the burger menu still does not close after you have selected a link.

[Joao]

Hi There

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[maxg10]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > Javascript

(function($) {
  $(window).load(function(){
    $('.x-navbar .x-nav-wrap.mobile a, .entry-content .content').on('click touchend', function() {
        $('.x-btn-navbar').trigger('click');
    })
  });
})(jQuery);

Hope it helps,

Joao

[maxg10]

Thank you so much 🙂
That worked great for closing the menu after a selection has been made. Still no joy with the sub menu drop down however?

[Nabeel A]

Hi again,

To fix the mobile drop down issue, just add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-sub-toggle {
    z-index: 9999 !important;
}
li.menu-item-has-children {
    position: relative !important;
}
.x-sub-toggle>span {
    top: 13px !important;
    margin-top: 0px !important;
}

Then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery( function($) {
	$(document).ready( function(){
		setTimeout( function() {
			$('.x-sub-toggle').each( function() {
				$(this).insertAfter( $(this).parent() );
			});
		},500);
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Author]

Posts