Solved Templates

Clicking mobile hamburger menu makes screen blurry.

Asked by Edze de Boer 5 years ago Last activity 5 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

Accepted answer

Marked as the solution
Rashida Rahman Staff
5 years ago

Thanks for letting me know your experience.

Glad that you have made it!

Best Regards

9 more replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
5 years ago

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

Edze de Boer Asked this
5 years ago

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

Rashida Rahman Staff
5 years ago

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

Rashida Rahman Staff
5 years ago

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

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

Kind Regards

Edze de Boer Asked this
5 years ago

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

Edze de Boer Asked this
5 years ago · edited

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

Rakesh
5 years ago

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.

Log in to reply.