Solved Templates

Offcanvas disappeared on many pages?!

Asked by Dominik 3 years ago Last activity 3 years ago

I need your help urgently. Unfortunately, an error has crept in after the last SPPB update: On the cell phone and on the tablet, the offcanvas menu is no longer displayed. The three bars are transparent. Also the background of the offcanvas menu is transparent. The settings in the backend do not work, although it is displayed correctly in the backend. Also the height (have here in the example 50px menu height and 45px logo height) can not be changed.
I have this on different websites. Before everything worked fine.

Mobile Version: https://prnt.sc/tfsCHrHkIMM5

Backend: https://prnt.sc/3HIQwHxAW34P

What should I do?
Domi

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

3 years ago

Dominik, for example on your laptop in folder "Joomla" or folder where you keep templates.
For transparent Offcanvas background this is temporary fix

body.ltr.offcanvs-position-right .offcanvas-menu, .offcanvas-menu {
  background: white;}

9 more replies

Rashida Rahman Staff

3 years ago

Hi there!

Thanks for your query.

I have visited the link: campenmithund.ch and offcanvas is showing there at my end.

Could not find this one: neu.marty-immovision

For this site: waldvogel-wila.ch kindly use the following code in your custom CSS:

#sp-header #offcanvas-toggler.offcanvas, #sp-header #offcanvas-toggler.mega {
    display: block !important;
}
#sp-header nav.sp-megamenu-wrapper #offcanvas-toggler {
    display: none !important;
}
.burger-icon>span {
    background-color: black;
}

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

Dominik Asked this

3 years ago · edited

Hi Rashida
On some devices it works on others look like here: https://prnt.sc/tfsCHrHkIMM5

neu.marty-immovision.ch
And if you already look at this page (access in hidden content). The buttons work, but the colors are not taken over in the frontend (in the backend it works).
Backend on hover: https://prnt.sc/sbBbjNr3Mg7u
Frontend on hover: https://prnt.sc/SeAHwsGtJqCQ

waldvogel-wila.ch
Your code works only partially and not as desired. On the PC view the offcanvas is also visible: https://prnt.sc/6AmPMsKE1qHJ

In the mobile view the offcanvas icon appears but everything does not look nice. I can't adjust the height either, no matter if I set 50px or 30px header height in the backend (mobile version). The spacing of the logo at the top and bottom is also not correct. https://prnt.sc/GkSw21Z-ab9z
And the background of the offcanvas menu is transparent. The settings are simply not taken over from the backend: https://prnt.sc/L1GiKB_kyg6R

This was completely correct a few days ago! On all pages, without exception. Why does it all look like this now?

I ask for very quick answer/correction.
Domi

Paul Frankowski Senior Staff

3 years ago · edited

If I may...

Must be

#sp-header #offcanvas-toggler.offcanvas, #sp-header #offcanvas-toggler.mega {
  display: grid !important;
}

not "block"

Dominik Asked this

3 years ago · edited

Hi Paul

Thank you for your solutions. But I can't change the Header Height on mobile version. If I change it (for example to 80px) I can see it in the backend but on mobile nothing happens... And the background of the offcanvas menu ist still transparent: https://prnt.sc/wkgkeqSODp5U

Paul Frankowski Senior Staff

3 years ago

Ok.

For bg - You used settings or custom CSS?

Dominik Asked this

3 years ago

Hi Paul

I used settings.

Domi

Paul Frankowski Senior Staff

3 years ago

Okay. Thx.

Dominik Asked this

3 years ago

What do you think? Should I downgrade to version 2.0.11 to restore everything? Would that do any good? If so, where can I find the old versions to download?

Dominik Asked this

3 years ago

Thank you Paul