YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar eventoteam asked

Menu Problem

Hello Yootheme Team,

My question is:

I want to close the offcanvas Menu automatically by clicking on the Menu Link in my Onepage.
Is that possible or can you fix it?

I am looking forward to your answer.

_
Best regards

  • Joomla
  • UIkit
  • YOOtheme Pro

Edited

9 Answers

1

Avatar eventoteam answered

Found the problem. There were multiple elements with the .uk-offcanvas class which propably broke the script.

0

Avatar thomas.p Support answered

Hi dennis.becker,

to show/hide the offcanvas, you can use the toggle() function. Also see UIkit 3 Offcanvas JavaScript.

UIkit.offcanvas('.uk-offcanvas').toggle();

However, the offcanvas toggle animation might prevent the scroll.

Therefore, I'd suggest to prevent the default action for links in the offcanvas bar, then toggle the offcanvas and then set the window location or scroll manually, whatever you like.

For example, add the following at Extensions->Templates->yootheme->OPEN WEBSITE BUILDER->Settings->Custom Code->SCRIPT (Joomla) or Appearance->Customize->Settings->Custom Code->SCRIPT (WordPress)
(I tested this with the Max demo package and mobile menu animation set to 'offcanvas')

jQuery(function(){  
    jQuery('.uk-offcanvas-bar a').click(function( event ) {  
        event.preventDefault();  
        var goTo = jQuery(this).attr('href');  
        UIkit.offcanvas('.uk-offcanvas').toggle();  
        setTimeout(function(){  
            window.location = goTo;  
        }, 500);  
    });  
});

Kind regards
Thomas

0

Avatar eventoteam answered

Hey Thomas,

thanks for your reply, that's exactly what I was looking for!

But now I've run into a different problem. When opening the offcanvas via .uk-navbar-toggle the isToggled() function will still return false. So toggling it causes some weird behaviour (opening back up when clicking on a link or not closing at all). This doesn't happen when opening it with toggle() or show().

0

Avatar thomas.p Support answered

This seems to happen only the first time you click an element in the offcanvas menu, is that correct?

0

Avatar thomas.p Support answered

Ok, thank you. Can you please remove the script for the time being and add admin access to your site in the hidden information so that I can have a first hand look?

I also recommend to make a full site backup before, although I only intend to test a script.

Thank you

0

Avatar thomas.p Support answered

Thanks for reporting back! And apologies I lost track of this thread.

Know someone who can answer? Share a link to this question via email or twitter.