Clicking Mobile Hamburger Menu Makes Screen Blurry. - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Clicking Mobile Hamburger Menu Makes Screen Blurry.

Edze de Boer

Edze de Boer

Template 4 years ago

Hi guys,

After updating from Helix Ultimate 1.1.4 to 2.0.2 I have issues with the mobile menu. Even after updating to 2.0.3 the same problem remains.

Mobile hamburger lines are now black instead of the color white that I gave it earlier.

Obviously, this part of custom.css is not working anymore for www.anoukart.com

/ Color hamburger menu-icon / ... #offcanvas-toggler > i.fa {color: white;} ...

After clicking the hamburger menu screen gets blurry and navigation is not possible anymore. I show you the screenprints of two websites before and after clicking the hamburger menu.

The problem shows on dozens of my websites.

Kind regards, Edze de Boer

https://www.screencast.com/t/YVg9PHSvmIKo

0
10 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #32306

Thanks for letting me know your experience.

Glad that you have made it!

Best Regards

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #31910

Hello there!

Sorry for your issue.

Would you please select different offcanvas menu styles and save?

https://prnt.sc/1qxvkl0

Clearing Joomla and browser cache is always important.

Best Regards

2
Edze de Boer
Edze de Boer
Accepted Answer
4 years ago #31911

Hello Rashida,

Thank you, first problem solved! How about the white color for the hamburger menu?

Obviously, this part of custom.css is not working anymore for www.anoukart.com / Color hamburger menu-icon / ... #offcanvas-toggler > i.fa {color: white;} ...

Kind regards, Edze

0
Edze de Boer
Edze de Boer
Accepted Answer
4 years ago #31913

Hello Rashida,

Also, the dropdown item on the last line of the mobile menu can't be opened.

https://www.screencast.com/t/jvpKaosansH

Kind regards, Edze

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #31916

Hello Boer,

Please go to Extensions>modules>Offcanvas then select hide ->then save -> Show then save

https://prnt.sc/1qye6jr

You may also check if the fontawesome is enabled or not: https://prnt.sc/1qy55zx

Let me know if it helps!

Best Regards

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #31917

Please use the following code in your custom CSS to change the offcanvas menu icon color:

.burger-icon>span {
    background-color: #fff;
        }

Kind Regards

1
Edze de Boer
Edze de Boer
Accepted Answer
4 years ago #31919

Hello Rashida,

This looks like a solution:

Template Options Advanced: Font Settings - Enable Font Awesome: Yes

However, it takes some practising to click the down arrow with your finger. It would be nicer if a click on the text of the dropdown item instead of a click on the little arrow could open the dropdown.

I changed the code in the custom.css for the off canvas menu item color, but with no result. I will give it some time to react to the changes. My experience is that sometimes it takes a little time, cache problem maybe....

Kind regards, Edze

0
Edze de Boer
Edze de Boer
Accepted Answer
4 years ago #32305

Hi Rashida,

I found a solution for the color of the hamburger menu icon. The code has no effect, using it in the custom.css. It does work fine here: Template - Options - Custom Code - Custom CSS

Kind regards, Edze

0
R
Rakesh
Accepted Answer
4 years ago #40878

After the update there should have been a message saying you need to re-save the menu styles. Had this problem for a while without knowing it and people could not use the offcanvas menu.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #40886

Hi Rakesh,

I understand and agree your point. Here is a faq we have about this, you can have a look:

https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/troubleshooting-faq#no-offcanvas-mobile-menu-after-helix-update

Best Regards

0