Side menu on mobile does not expand (megamenu)

[maelga]

Hi,

My users are reporting that the side menu does not expand on mobile and afe unable to access the right page as a result.

I’m using mega menu.
I’ve tested with Chrome and Firefox and the result is the same, so I don’t think it is browser related.
In fact, the menu does expand only when pressing the small + at the right, which is hardly accessible.
Pressing the menu title (what most mobile users do) reacts like a normal hyperlink (change color) but nothing happens, the menu does not expand.

Do you guys have a fix for this?
My users believe the site does not work on mobile, so it’s a very serious issue.

[Laura]

Hello, can you share a link to your website ?:)

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[maelga]

http://www.familiz.sg

[maelga]

Laura,

I have just seen that it’s actually the same behaviour on KLEO demo website, which also uses mega menu.

There’s really an important need for improvement here to make KLEO user friendly in mobile.

It doesn’t seem so complicated, so I hope you can quickly come up with a fix for this 🙂

[Laura]

Hello, i cant see your site. Well it actually works pretty well, but if you want to make it bigger ( the area to click ) i can do it with css 🙂 But please share admin credentials if possible. Thanks!

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[maelga]

Hi Laura,

Sorry for my late response.

Please find my credentials: (It’s a new setup with Kleo 3.0.6)
http://wordpress-8639-19304-53184.cloudwaysapps.com/
SFTP
username: bqxnbgzyrr
password: aM5gYaAMQH

I need your css skills to get the side menu working on mobile (small screen).
What I exactly need is to have MENU ITEM 2 expand when pressing the menu name.
Currently it only expands when pressing the + sign, which is very user-unfriendly.
It should just be a matter of applying the same css of the + sign to the menu name (something to do with :hover?).

Please let me know if you need anything else.
Thank you for your help

[Laura]

Hello, i dont see any side menu in your website

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[maelga]

Hi Laura,

The side menu shows only on mobile/tablet.
Just reduce your desktop window to simulate a smaller screen and then click on the menu icon on the top right corner.

Once the menu shows up, you’ll notice that Menu Item 2 does not expand when clicking on the menu title, but only when clicking the + sign, which is super user unfriendly.

I hope your are to apply the expand/collapse behaviour to the menu title too.

Let me know if it’s unclear.
Thanks again

[Laura]

Hello, please add this to style.css

COPY CODE

.widget_nav_menu .parent>a .caret:after {
    width: 120px;
    padding-left: 90px;
}

This should make the clickable to spand area bigger

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[maelga]

Thanks Laura.

[maelga]

Hi Laura,

I re-open this thread to add the following questions for the same side menu:

1. How can I have only 1 menu item to show expanded at a time? (I guess it’s a jquery to modify)
If I first click Menu Item 1 and then Menu Item 2, both are expanded. I would like Menu Item 1 to collapse back automatically when Menu Item 2 expands.

2. I would like to add a logo at the very top of the side menu (next to the div.offcanvas-title).
What is the file to edit?

Site and SFTP remain the same as above.

Thanks for your help.

[Laura]

Hello, that requires some time and development and right now its not possible, i would suggest to hire a developer to do it for you 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts