Staff replied SP Page Builder

[🕷️Bug] Offcanvas Menu Mobile Burger Icon Missing on the Right with Joomla 6

Asked by Brad Thompson 1 year ago Last activity 11 months ago

After upgrading to Joomla 6 and latest version of SPP and Helix, the offcanvas burger icon has disappeared if it's set to the right side of the header.

If you set it to the left it shows up and the mobile menu works fine.

I deleted my custom.css and cleared cache and the behavior didn't change, then put my custom.css back.

Joomla 6.0
SP PageBuilder 6.1.0
Helix Ultimate 2.2.1

Playing around in inpector, I was able to pull the mobile menu in which had the burger attached adjusting the negative pixels, but it was not operational.

8 replies

Mehtaz Afsana Borsha Staff

Hi

Thanks for contacting us and sorry for your issue. I will add it to our bug list so that our DEV team can solve it ASAP.

-Regards.

Kris
1 year ago · edited

Hi,
the code below restores the icon / overrides the css code template.css :

 @media (max-width: 992px)  {
#sp-header.full-header-center .menu-with-offcanvas #offcanvas-toggler { 
display: inline-flex !important;
margin-left: auto !important;
}
}
Brad Thompson Asked this

This did not work for me, I cleared all caches.

Mehtaz Afsana Borsha Staff

Hi Kris,

Thanks for sharing the solution.

Brad Thompson Asked this

Here is the fix, it shouldn't have been this hard. There's a major bug in the template between left and right positioning of the burger-icon.

  /*Off Canvas Menu Fix by Brad */
#sp-menu.menu-with-social .sp-megamenu-wrapper {
    flex: auto;
    justify-content: space-between;
    display: flex !important;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
}

@media (max-width: 896px) {
    #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: block !important;
    }
}

The media query was hiding the burger menu from appearing in template.css

#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: none !important
}
Rvdzande

I have a variant of this issue in Joomla 5.x on 10 sites. This code fixes it:

 @media (max-width: 992px)  {
#sp-header.full-header-center .menu-with-offcanvas #offcanvas-toggler { 
display: inline-flex !important;
margin-left: auto !important;
}
}

Plus I have added some margin for the hamburger menu which is shown half outside the canvas. Believe there is a major issue with the menu and the lastest Helix Ultimate.

Mehtaz Afsana Borsha Staff

Hi Brad and Rvdzande,

Thanks for sharing the solutions. I will inform our team about it.

Rvdzande

FYI, it does not work in all scenarios. Still working on a fix for some sites where the menu IS alligned to the right, but not showing up.

Mehtaz Afsana Borsha Staff

No worries, I will inform our team about it.

Mehtaz Afsana Borsha Staff

Hi,

Could you please keep a full site backup and try the latest helix build? It should work there.

Thanks.

Log in to reply.