Support Forums

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.

20 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 :)


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 122
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 90
Toufiq

Toufiq

Total Accepted Answers: 33
Al Mamun

Al Mamun

Total Accepted Answers: 3
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

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