[🕷️Bug] Offcanvas Menu Mobile Burger Icon Missing On The Right With Joomla 6 - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

[🕷️Bug] Offcanvas Menu Mobile Burger Icon Missing On The Right With Joomla 6

Brad Thompson

Brad Thompson

SP Page Builder 1 month 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.

0
10 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #207812

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.

1
Kris
Kris
Accepted Answer
1 month ago #208049

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;
}
}
1
Brad Thompson
Brad Thompson
Accepted Answer
1 month ago #208153

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

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #208150

Hi Kris,

Thanks for sharing the solution.

-1
Brad Thompson
Brad Thompson
Accepted Answer
1 month ago #208890

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
}
0
R
Rvdzande
Accepted Answer
1 month ago #208990

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.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #208992

Hi Brad and Rvdzande,

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

0
R
Rvdzande
Accepted Answer
1 month ago #209006

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.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 weeks ago #210254

No worries, I will inform our team about it.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 weeks ago #210359

Hi,

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

Thanks.

0