1. Susan White
  2. Helix Ultimate
  3. Sunday, 28 October 2018
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.
Responses (24)
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 1
Accepted Answer Pending Moderation
(Following …)
  1. more than a month ago
  2. Helix Ultimate
  3. # 2
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 3
Accepted Answer Pending Moderation
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 4
Accepted Answer Pending Moderation
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 5
Accepted Answer Pending Moderation
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 6
Accepted Answer Pending Moderation
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/
  1. more than a month ago
  2. Helix Ultimate
  3. # 7
Accepted Answer Pending Moderation
  1. more than a month ago
  2. Helix Ultimate
  3. # 8
Accepted Answer Pending Moderation
Is there some News concerning this issue?
Best Regards
  1. more than a month ago
  2. Helix Ultimate
  3. # 9
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 10
Accepted Answer Pending Moderation
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');
  1. more than a month ago
  2. Helix Ultimate
  3. # 11
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 12
Accepted Answer Pending Moderation
Still not working for me.:(
  1. more than a month ago
  2. Helix Ultimate
  3. # 13
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 14
Accepted Answer Pending Moderation
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 15
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 16
Accepted Answer Pending Moderation
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?
  1. more than a month ago
  2. Helix Ultimate
  3. # 17
Accepted Answer Pending Moderation
Hi

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

Thank you
  1. more than a month ago
  2. Helix Ultimate
  3. # 18
Accepted Answer Pending Moderation
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 19
Accepted Answer Pending Moderation
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 :)
  1. more than a month ago
  2. Helix Ultimate
  3. # 20
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 21
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 22
Accepted Answer Pending Moderation
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 23
Accepted Answer Pending Moderation
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..
  1. more than a month ago
  2. Helix Ultimate
  3. # 24


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


This forum is archived

This forum has been archived. Please use JoomShaper official support system.