[IkonifyParticipant]

Hello,

I have added the following code to the Customizer -> JS area to get the mobile menu to close when pressed and it works fine:

(function($){
$(‘.x-navbar .x-nav-wrap.mobile a’).on(‘touchend click’, function(){
$(‘.x-nav-wrap.mobile’).toggleClass(‘in’).css(‘height’, 0);
$(‘.x-btn-navbar’).toggleClass(‘collapsed’);

});
})(jQuery);

I do have two issues with it though:

1# The first link, #home, just nudges the screen upwards, it doesn’t actually scroll to the top as it should (and like the other links do).

2# The button in the mobile menu doesn’t revert to the “unpressed” state.

I will reply to this message with the website address and login information.

Thanks in advance,
Henri

[IkonifyParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Thanks for writing in!

#1: Please update your JavaScript code to this:

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

#2: The reason of this issue is that you have two home sections, one is hidden on desktops, and another is on mobiles. The one that is hidden on mobiles has the ID of start that your navbar menu item uses. As it’s hidden, mobile menu item is unable to scroll to this section. The quick solution here would be to use a JS code that will replace the URL of your navbar home menu item to use visible home section’s ID on mobiles.

To achieve that, simply add following JS code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  $('.home .mobile .menu-item-23 > a').attr('href', 'http://www.recubator.com/#mobile-home');
});

Thank you!

[Author]

Posts