Staff replied Helix Framework

Helix offcanvas menu 2 things

Asked by Milo 3 months ago Last activity 3 months ago

Hello,

So two things:

How to make the parent clickable, not only the arrow-right?
Tried separator, parent menu item, a link with # - nothing...
I have a stack of elements in my mobile menu... when I open one element with 2 children, everything goes down and the last parent link is not visible (!!) - can't scroll to see it (!!!)

There was one scrolling solutions to give offcanvas overflow-y - well, it then moves the whole offcanvas, not just the menu (right now the logo and search stay in place which is good, I guess).

The case is on a live site: (hidden)

15 replies

Ziaul Kabir Staff

3 months ago

Hello,

Thanks for reaching out to us. Could you please share temporary administrator access to your Joomla backend? You can provide the credentials securely in the hidden content section. Also, please take a full backup of your site before we make any changes.

Once I have access, I’ll investigate further and see what’s causing the issue. Let me know once you’ve shared the details!

Best regards,

Milo Asked this

3 months ago

Hello,

I have asked the customer to allow this as there is a lot of client data. He should be OK with it but well, I need to do it : )

BTW could you also investigate this one:
https://www.joomshaper.com/forum/question/45041#qa-answer-225999

I have positions and sections that are parent for those and if I don't populate positions, the sections don't disappear, in fact - one doesn't disappear and I'm wondering why.

Ziaul Kabir Staff

3 months ago

Hello Milo,

Just a quick clarification regarding the clickable parent menu items:

Please use Menu Item Type → System Links → URL (not Menu Heading) for all parent menu items.

Then set the URL to #.

This will ensure the parent item is rendered as a proper clickable link (<a href="#">) while still keeping its submenu structure intact.

Please apply this change first and let me know once it’s done. After that, I’ll check it and guide you with the next steps.

Best regards,

Milo Asked this

3 months ago

Yeah but you know - they expand but don't roll back : /
Hidden info to admin panel.

Ziaul Kabir Staff

3 months ago

Please, check now and let us know the update.

Thanks

Milo Asked this

3 months ago

Hey, what am I checking?

The scrollable offcanvas menu or which thing?

Because the menu still goes down and "Sklep" is hidden (Oppo Reno 6 Pro)...
the bottom system address bar covers it.

Because on customer's phone it was not scrollable at all, at my phone - it always was... so no idea.

Milo Asked this

3 months ago

Please read the hidden message.

Ziaul Kabir Staff

3 months ago

Hello Milo,

Thank you for your feedback.

Regarding the first issue, I noticed that the parent menu items were previously configured as Menu Heading items. In that configuration, the text itself is not rendered as a clickable link. After changing the parent items to Menu Item Type → URL (with # as the URL), the parent text becomes clickable as expected.

As for the second issue, when a parent menu item is expanded, the submenu items naturally require additional vertical space within the offcanvas menu. On our side, the offcanvas menu is scrollable, and we are able to access all menu items without any issue after expanding the submenu.

I have tested the site on multiple devices and browsers and could not reproduce the behavior where the last menu item becomes inaccessible. This may be related to a specific device, browser version, or browser UI behavior.

Could you please test again using:

A different mobile device, if available
An updated version of your mobile browser
An alternative browser (Chrome, Firefox, Samsung Internet, etc.)

Additionally, if possible, please provide:

A screen recording showing the issue

With this information, we can investigate further and determine whether the problem is device-specific or if there is another factor involved.

Best regards,

Milo Asked this

3 months ago

First issue: it's clickable but doesn't roll back... it stays open if clicked again.

Doesn't "Sklep" (the last item) disappear for you when you expand elements?

Milo Asked this

3 months ago

Please see the video in Hidden Content

The menu doesn't roll back if # is used.
Sklep goes away under the android menu. I tried to add margin or padding to the menu but no matter where I add it, it just doesn't go over the one-but-last element : /

Ziaul Kabir Staff

3 months ago

Issues is resolved.

I have added this custom js in here: /templates/shaper_helixultimate/js/custom.js

document.addEventListener('DOMContentLoaded', function () {
  const offcanvas = document.querySelector('.offcanvas-inner');
  if (!offcanvas) return;

  offcanvas.querySelectorAll('.menu-parent > a').forEach(function (link) {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      e.stopImmediatePropagation();

      const parentLi = link.closest('.menu-parent');
      const isExpanded = parentLi.getAttribute('aria-expanded') === 'true';

      parentLi.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');

      const sub = parentLi.querySelector('.menu-child');
      if (sub) {
        sub.style.display = isExpanded ? 'none' : 'block';
      }
    }, true);
  });
});

Thanks

Milo Asked this

3 months ago

Ah, the famous # remover ; ) we did that in Wordpress some time ago hehe

Thank you.

Milo Asked this

3 months ago

Ziaul, you have any idea for the Sklep link disappearing?
On iPhone it's visible on slide but when you release the finger, it sliders down and is invisible...

Ziaul Kabir Staff

3 months ago

Hello Milo,

I checked again on iPhone, but I am unable to reproduce this issue on my end. The "Sklep" menu item remains accessible after expanding the menu, and I can scroll to it without it becoming hidden behind the browser UI.

At the moment, this appears to be device-, browser-, or configuration-specific. Could you please let me know:

The exact iPhone model
iOS version
Browser used (Safari, Chrome, etc.)
A screen recording showing the behavior

That would help us investigate further and determine what is causing the issue on the affected devices.

Thank you.

Milo Asked this

3 months ago

iPhone 13 standard

Oppo Reno 6 Pro 5G

I will try more, will try iPhone 16E and Redmi Note 9 Pro, they will be freshly opened.

I saw that one thing looks different as if there was some caching problem (too much caching).

Ziaul Kabir Staff

3 months ago

I think there is caching issues.

Thanks

Milo Asked this

3 months ago

Yeah, now I will have to do research into that... cleaning files in the admin panel doesn't do much...

Ziaul Kabir Staff

3 months ago

Ok.
If everything is working fine now, please mark the question as complete by accepting any of our answers.

Thank you!