Helix Offcanvas Menu 2 Things - Question | JoomShaper

Celebrate JoomShaper's Sweet 16 with Flat 35% OFF!

Helix Offcanvas Menu 2 Things

Milo

Milo

Helix Framework 6 days ago

Hello,

So two things:

  1. How to make the parent clickable, not only the arrow-right?

  2. Tried separator, parent menu item, a link with # - nothing...

  3. 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)

0
18 Answers
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 6 days ago #226147

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,

0
Milo
Milo
Accepted Answer
6 days ago #226149

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.

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 6 days ago #226152

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,

0
Milo
Milo
Accepted Answer
6 days ago #226154

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

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 6 days ago #226156

Please, check now and let us know the update.

Thanks

0
Milo
Milo
Accepted Answer
6 days ago #226163

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.

0
Milo
Milo
Accepted Answer
5 days ago #226182

Please read the hidden message.

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 5 days ago #226218

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,

0
Milo
Milo
Accepted Answer
5 days ago #226221

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?

0
Milo
Milo
Accepted Answer
5 days ago #226222

Please see the video in Hidden Content

  1. The menu doesn't roll back if # is used.
  2. 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 : /
0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 5 days ago #226234

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

0
Milo
Milo
Accepted Answer
5 days ago #226252

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

Thank you.

0
Milo
Milo
Accepted Answer
4 days ago #226258

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...

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 days ago #226341

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.

0
Milo
Milo
Accepted Answer
2 days ago #226366

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).

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 days ago #226377

I think there is caching issues.

Thanks

0
Milo
Milo
Accepted Answer
1 day ago #226475

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

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 1 day ago #226516

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

Thank you!

0