X Theme: Navigation not collapsing on click (One Page Navigation)

Support
#1

Hi

I am having a minor - yet annoying - issue with the navigation on my website www.osdergror.dk. This is only an issue on the mobile version of the site. There is no issue with the navigation as displayed on desktop.

However, once the burger menu has been opened in a mobile view, the user has to close it accordingly. Ideally we want it to close after having clicked. I’ve attached a screenshot of the issue below:

I’ve browsed the Apex forums for a solution, but so far with no satisfying outcome. I’ve tried inserting this JS as it seemed to work for another user, but without any effect.

jQuery(function($) {
     $('.x-sub-toggle').off('click');
 $('.x-sub-toggle').on('click touchstart', function(e) {
    e.preventDefault();
    $(this).toggleClass('x-active').closest('li').toggleClass('x-active');
    $(this).parent().next('ul').toggleClass('in');
  });
});
#2

Hi,

You can try this code instead.

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

Hope that helps

#3

Hi Paul. I just tried that, but it didn’t change anything. Any other solutions?

#4

Hi There,

I would like to check your website but the password is incorrect.

Could you please double check?

Thanks.

#5

I’ve updated the secure not above. I hope this password works. :slight_smile:

#6

Hi There,

Please remove the following code from your custom JS:

// Add Facebook custom audience pixel Code
// =============================================================================
function add_facebook_audience_pixel_code(){
?>

<!– Insert Facebook custom audience pixel Code starts here –>

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '446311092407143'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=446311092407143&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '446311092407143', {
em: 'insert_email_variable'
});
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=446311092407143&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->

That is a php code and will cause JS error on the site. It is meant to be added on your child theme. Also when you add the code on your child theme functions.php it might fail because it has syntax error too. Format should be like this:

// Add Facebook custom audience pixel Code
// =============================================================================
function add_facebook_audience_pixel_code(){
?>

<!– Insert Facebook custom pixel Code starts here –>


<?php // This part is missing from you code. Make sure to copy complete code.
}
add_action( 'wp_head', 'add_facebook_audience_pixel_code' );
// End Facebook custom audience pixel Code
// =============================================================================

Hope this helps.

#7

Hi Lely & Co.

I’ve now removed the Facebook Tracking Pixel code, and will add it to the custom theme later. However, when testing the JS I’m still not getting the result I’d like - nothing changes with the menu.

#8

Hi There,

I changed the code to this:

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

Everything is working fine now.

Cheers!