Offcanvas Menu Mobile Burger Icon Missing On The Right After Update To Helix Ultimat 2.2.1
Peter Hunkeler
My site is running:
- Joomla 5.3.4
- Helix Ultimate 2.1.2
- SP Page Builder 6.0.0
In preparation to update to Joomla 6, I'm starting with updates for all extensions, first being the Helix Ultimate framework. So I installed the newest Helix Ultimate 2.2.1 (leaving everyting else as is).
The Off-Canvas Toggler (Hamburger Icon) is not showing at all at the right side position. Looking at the HTML for the page, I find that the "offcanvas-toggler" anchor is completely missing.
With Helix 2.1.2, the HTML looks liek this:
With Helix 2.2.1, the HTML looks like this:
And, before you ask, I'm afraid I'm not allowed to hand out access to the backend, since there is sensitive data on the site. Sorry.
Rashida Rahman
Accepted AnswerHi Peter,
No issues. Please try the following code instead:
@media screen and (max-width: 992px) {
#sp-header.full-header-left .menu-with-offcanvas #offcanvas-toggler,
#sp-header.full-header-center .menu-with-offcanvas #offcanvas-toggler,
#sp-header.header-with-modal-menu .menu-with-offcanvas #offcanvas-toggler,
#sp-header.lg-header .menu-with-offcanvas #offcanvas-toggler,
#sp-header.header-with-social .menu-with-offcanvas #offcanvas-toggler
{display: flex !important;margin-right:10px;}
}Note: Kindly remove the authentication code from your previous reply and put them in the hidden content box for safety purposes.
Best regards,
Rashida Rahman
Accepted AnswerHi peter,
Sorry for your experience.
Would you please have a look into the following documentation to see if it helps!
Best regards,
Peter Hunkeler
Accepted AnswerHello Rashida Thanks for the answer.
Just to be clear: The site is at Joomla 5.3.5 (not yet 6) and the problem arises after updating Helix Framework, only.
I just tried and it partially solves the problem. The off-canvas menu icon does apper but not at the correct place.
With Helix 2.1.2, the icon is to the right of the social media icons:
With Helix 2.2.1 and the custom CSS it appears above the social media icons:
Peter Hunkeler
Accepted AnswerI just found the hint about updating to Helix 2.2.x. There it says:
Ensure you are using the latest version of Helix Ultimate before upgrading to Joomla 6.
But then in the list below:
Do not use Helix Ultimate v2.2.x for old Joomla versions, including J3.x series.
Does this mean Helix v2.2.x is not expected to be used with Joomla 5, as well?
If so, I'd have to update Helix 2.2.x and Joomla t0 6.x at the same time for Helix to work properly. I usually do one update at a time, then test, then next update, test, and so on.
Rashida Rahman
Accepted AnswerHi,
You can use Helix Ultimate v2.2.x for Joomla 5. You will find the information here:
Moreover, I have visited your site and it seems okay at my end. Please check the screenshot in the hidden content box.
Best regards,
Peter Hunkeler
Accepted AnswerI'm sorry I missed to write it happens on the development site of mettmi2026.ch, namely https://dev.mettmi2026.ch
This development site is protected with basic authentication. See hidden content.
May I kindly ask you to check again. Currently the custom CSS you mentioned is not active. I will enable as soon as you have had a look the site without the custom CSS.
Regards Peter
Peter Hunkeler
Accepted AnswerHello Rashida
With above CSS, the Offcanvas icon is showing, but to the left of the social icons. I can live with that. And it kind of is more consistent with the desktop menu, where the social icons are to the right of the menu bar as well.
Thank you for the quick support and solution. Best regards Peter
Rashida Rahman
Accepted AnswerHi peter,
You are always welcome:)
Please do let me know if you still want the offcanvas icon to the right of your social icons.
Thanks for accepting the answer...
Peter Hunkeler
Accepted AnswerHi Rashida I like it as it is.
Out of curiosity, I'd be interested to see the CSS needed to move it to the right of the social icons. So, if this not too much of an effort, may I kindly ask you to post it? Maybe, someone else would be interested in it, too.
Regards Peter
Rashida Rahman
Accepted AnswerHi Peter,
Sure! The following code should be enough to swap their positions:
@media (max-width: 991px) {
#sp-menu .menu-wrap {
order: 1;
}
}However, you may need a few additional adjustments as well, such as spacing between the elements.
Best regards,