We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

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

Featured Lock Resolved
I am using a plugin to get to the various articles in a one page website, which is working nicely but I can't get the off canvas menu to close once it has scrolled to article. Can this be done on the Helix Ultimate template.

23 Answers

Sifat - Staff

More than a month ago #Permalink
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

pepperstreet

More than a month ago #Permalink
(Following …)

Arun Sasi

More than a month ago #Permalink
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

Susan White

More than a month ago #Permalink
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.

Susan White

More than a month ago #Permalink
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.

Arun Sasi

More than a month ago #Permalink
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.

Susan White

More than a month ago #Permalink
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/

brinkley

More than a month ago #Permalink
Is there some News concerning this issue?
Best Regards

Sifat - Staff

More than a month ago #Permalink
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

Bhavin

More than a month ago #Permalink
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');

brinkley

More than a month ago #Permalink
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

Susan White

More than a month ago #Permalink
Still not working for me.:(

Bhavin

More than a month ago #Permalink
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

brinkley

More than a month ago #Permalink
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

More than a month ago #Permalink
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

brinkley

More than a month ago #Permalink
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?

Bob

More than a month ago #Permalink
Hi

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

Thank you

seanbusse

More than a month ago #Permalink
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.

Bob

More than a month ago #Permalink
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 :)

Mario

More than a month ago #Permalink
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

Mario

More than a month ago #Permalink
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

Emeric

More than a month ago #Permalink
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.


There are no replies made for this post yet.
Be one of the first to reply to this post!

126

Templates

334231

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us