Resolved How do I make off canvas menu close on one page website

Hi,
Thanks for your query. Actually helix-ultimate isn't designed for one page templates. But you can use your custom code to do so. But there is no default feature to close automatically the menu in helix-ultimate.


Note: custom support is beyond our support range.

-Best Regards

(Following …)

Hi,

Try this code

 var nav_collapse = $('.offcanvas-menu .menu.nav');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

Thanks
Arun

Hi,

Try this code

 var nav_collapse = $('.offcanvas-menu .menu.nav');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

Thanks
Arun

I've tried putting this code in the JS main and it does not work. Am i placing it in the right place.

If this is Helix Ultimate surely this is one of the issues that needs to be addressed on this template. I love using this template and want to keep up to date on your Helix template but in order to make this work I have to go to Helix 3 - going backwards does not make sense to me.

Hi,

Try this code

 var nav_collapse = $('.offcanvas-menu .menu.nav');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

Thanks
Arun

I've tried putting this code in the JS main and it does not work. Am i placing it in the right place.

Please share your URL. In my website, it is working perfectly.

Hi,

Try this code

 var nav_collapse = $('.offcanvas-menu .menu.nav');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

Thanks
Arun

I've tried putting this code in the JS main and it does not work. Am i placing it in the right place.

Please share your URL. In my website, it is working perfectly.

http://ashleighandbryan.savethisdate.co.za/

http://ashleighandbryan.savethisdate.co.za/

Is there some News concerning this issue?
Best Regards

Is there some News concerning this issue?
Best Regards

Hi,
Sorry as i mentioned, there is no default feature to use helix-ultimate as one pager. You need to use your custom code for that.

Note: custom support is beyond our support range.

-Thanks

Hi,

Try this code

 var nav_collapse = $('.offcanvas-menu .menu.nav');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

Thanks
Arun

I've tried putting this code in the JS main and it does not work. Am i placing it in the right place.

Please share your URL. In my website, it is working perfectly.

http://ashleighandbryan.savethisdate.co.za/

Not sure, if you've already found the fix.
but I was going through same and below is the fix that worked for me.

In the above JS code Replace

$('.offcanvas-init').removeClass('offcanvas-active');

with

$('.off-canvas-menu-init').removeClass('offcanvas');

Hi,

Try this code

 var nav_collapse = $('.offcanvas-menu .menu.nav');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

Thanks
Arun

I've tried putting this code in the JS main and it does not work. Am i placing it in the right place.

Please share your URL. In my website, it is working perfectly.

http://ashleighandbryan.savethisdate.co.za/

Not sure, if you've already found the fix.
but I was going through same and below is the fix that worked for me.

In the above JS code Replace

$('.offcanvas-init').removeClass('offcanvas-active');

with

$('.off-canvas-menu-init').removeClass('offcanvas');

Thank you Bhavin. For me it does not work. Which template are you using?
Best regards

Still not working for me.

Still not working for me.

Oops my bad, I missed to see that you are using Helix ultimate.

For Ultimate version, this code should work. if you've customized the joomla menu module than it might not work.

var nav_collapse = $('.offcanvas-menu .menu.nav');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

Place this code in your template's main.js ( site/templates/shaper_helixultimate/js/main.js ) at the end before the last JQuery closing });

Cheers

Bhavin, Thanks for your engeneering an the solution for Helix Ultimate. I'm using the joomshaper Rental-Template under the following url: https://erpel.polarwolf.li/

I'm not able to find a solution myself for this problem. Can you please help me? I will pay for your work, if you can show me the right way.

Bhavin, Thanks for your engeneering an the solution for Helix Ultimate. I'm using the joomshaper Rental-Template under the following url: https://erpel.polarwolf.li/

I'm not able to find a solution myself for this problem. Can you please help me? I will pay for your work, if you can show me the right way.

Hi Brinkley,
I see that your menu structure is missing "nav" element. So add the below code at the end of the main.js file. In your case it is located https://erpel.polarwolf.li/templates/erpel.ch/js/main.js
I've also added #links with smooth scrolling

// Smooth scrolling for # link with anchor name

$("a[href^='#']").on('click', function(e) {

        // prevent default anchor click behavior

        e.preventDefault();

     

        // animate

        $('html, body').animate({

            scrollTop: $(this.hash).offset().top

          }, 1000, function(){

          });

     });



     $("a[href^='#about']").on('click', function(e) {

        // prevent default anchor click behavior

        e.preventDefault();

     

        // animate

        $('html, body').animate({

            scrollTop: $(this.hash).offset().top

          }, 1000, function(){

          });

     });



// Offcanvas hack for one page website

    var nav_collapse = $('.offcanvas-menu .menu');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

Cheer

Bhavin, Thanks for your engeneering an the solution for Helix Ultimate. I'm using the joomshaper Rental-Template under the following url: https://erpel.polarwolf.li/

I'm not able to find a solution myself for this problem. Can you please help me? I will pay for your work, if you can show me the right way.

Hi Brinkley,
I see that your menu structure is missing "nav" element. So add the below code at the end of the main.js file. In your case it is located https://erpel.polarwolf.li/templates/erpel.ch/js/main.js
I've also added #links with smooth scrolling

Oh - Wow! Thank you so much. How can i pay you for your work?

Hi

I also have the same problem. Please advise which one will work for Helix 3 if you don't mind

Thank you

I solved the problem with a workaround of duplicating my Main Menu and changing the url paths to http://sitename.com/index.php/#sectionid. Then my off-canvas menu I used the duplicated menu for. The smooth-scroll is lost on mobile but the functionality to close the off-canvas works that way. The "http://sitename.com" is only an example and can be left out of the URL if desired.

I solved the problem with a workaround of duplicating my Main Menu and changing the url paths to http://sitename.com/index.php/#sectionid. Then my off-canvas menu I used the duplicated menu for. The smooth-scroll is lost on mobile but the functionality to close the off-canvas works that way. The "http://sitename.com" is only an example and can be left out of the URL if desired.

Thank you - yes, I have ended up doing this as well - much appreciated

Hi,

Try this code

 var nav_collapse = $('.offcanvas-menu .menu.nav');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

Thanks
Arun

I've tried putting this code in the JS main and it does not work. Am i placing it in the right place.

Please share your URL. In my website, it is working perfectly.

http://ashleighandbryan.savethisdate.co.za/

Not sure, if you've already found the fix.
but I was going through same and below is the fix that worked for me.

In the above JS code Replace

$('.offcanvas-init').removeClass('offcanvas-active');

with

$('.off-canvas-menu-init').removeClass('offcanvas');

Thank you Bhavin. It works. but there's another problem now:
The link to a new SP Page Builder page no longer works. Clicking on it closes the menu but it does not jump to the page.

Can you help me?

Best regards

Hi,

Try this code

 var nav_collapse = $('.offcanvas-menu .menu.nav');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

Thanks
Arun

I've tried putting this code in the JS main and it does not work. Am i placing it in the right place.

Please share your URL. In my website, it is working perfectly.

http://ashleighandbryan.savethisdate.co.za/

Not sure, if you've already found the fix.
but I was going through same and below is the fix that worked for me.

In the above JS code Replace

$('.offcanvas-init').removeClass('offcanvas-active');

with

$('.off-canvas-menu-init').removeClass('offcanvas');

Thank you Bhavin. It works. but there's another problem now:
The link to a new SP Page Builder page no longer works. Clicking on it closes the menu but it does not jump to the page.

Can you help me?

Best regards

Hi all

in the meantime i have found the right code that solved the problem for me.
Insert at the end off main.js:

jQuery('.nav.menu').click(function(){jQuery('.close-offcanvas').trigger('click')});

Best regards

Hello,

For me, this code works

 var nav_collapse = $('.offcanvas-menu .menu.nav');

    nav_collapse.click('li a', function(event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

But it close directly off canvas menu without scrolling to the link.

Hi,

Find in main.js // Offcanvs section..

After Close X code:

$('.close-offcanvas, .offcanvas-overlay').on('click', function (event) {

        event.preventDefault();

        $('.offcanvas-init').removeClass('offcanvas-active');

    });

add sample:

$('a.smoothscroll, .offcanvas-overlay').on('click', function (event) {

        event.preventDefault();

        $('body').removeClass('offcanvas-active');

    });

Add anyclass for menu a (example a.smoothscroll)
apper in source same:

<li class="item-186"><a href="#ref" class="smoothscroll">ScrollTo</a></li>

OR create custom.js file
and add this:

jQuery(function ($) {

    // Offcanvs

	$('a.smoothscroll, .offcanvas-overlay').on('click', function (event) {

        event.preventDefault();

        $('body').removeClass('offcanvas-active');

    });  

});

Or add to template Custom Code->Custom Javascript textarea..