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

Your Time: Our Time:

Helix Ultimate - Offcanvas dropdown not working on custom header

Featured Lock Resolved Bug
When deactivating predefined headers, I create a custom header only visible in mobile devices, as the documentation suggest. But when I test it no mobile devices I get a fully blown up menu item list, not a hamburger icon with onClick behaviour that there is supposed to be. The hamburger and funcitonality only work with the predefined headers. ss_mobile_view.png

What am I doing wrong?

Attachments (3)

  • ss_mobile_view.png
    ss_mobile_view.png 237.6 KB
  • ss_desktop_view.png
    ss_desktop_view.png 777.3 KB
  • ss_layout.png
    ss_layout.png 278.6 KB

7 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
must be the "menu" if you want to have off-canvas
BTW in Helix options, you can set to show only [=] if you need.

PLEASE do not complicate matters or
write your own code for the template.
Sorry, I cannot help more.

Paul Frankowski - Staff

More than a month ago #Permalink
The custom header must have name header
it was in the documentation.


More than a month ago #Permalink
Looks better now, but it still doesn't work. See scrennshot, please.

Attachments (1)

  • mobile_offcanvas.png
    mobile_offcanvas.png 278 KB

Paul Frankowski - Staff

More than a month ago #Permalink
have you used "menu" position there , as it was in documentation !?


Attachments (1)

  • 0-0.jpg
    0-0.jpg 35 KB


More than a month ago #Permalink
Ok, no I was using the offcanvas position for the offcanvas menu. The thing is that I have a different menu for offcanvas than for the desktop site. SO I have to custom headers, one that shows on desktop and one that shows on mobile devices. I created two custom headers, and in the responsive attributes I hid one on mobiles and another one on desktops.

Everything else is as in the documentation now, and now I get both menus (as both menus are on the "menu" position), but I don't get the hamburger icon on the "offcanvas" mobile version menu.

I know its complicated, but I don't know if I'm explaining myself proprely. Sorry ir I'm not clear enough.


More than a month ago #Permalink
Sorry for the late reply. Your clarification did help. This is what I did, in case anybody is interested in doing the same:

  • When using the right configuration, the offcanvas doesn't show because there are two layout boxes called "Menu", and it applies to the first one in the layout order.
  • In my case it was the desktop version, so I swapped them arround, first the mobile header to make the offcanvas work, and then the desktop header.
  • I renamed the layout row for the desktop header to "Header Desktop"
  • I hide the mobile header on desktop dvices, and the desktop header from mobile devices through the responsive options.

I'm attaching a screenshot of the layout. The Top1 and Top2 positions are used in my case for a language switcher, so they can be ignored if you don't want them.


Attachments (1)

  • sc.png
    sc.png 6.6 KB

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

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 109


Total Accepted Answers: 85
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 70
Ofi Khan

Ofi Khan

Total Accepted Answers: 48
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 32




Community Users


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. is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us