Masonic – Problem with Mobile Menu

Hi @cousinfred
Could you try disabling all the plugins and then check if that helps? You can then enable the plugins one by one until you find the plugin that is causing the issue and let me know!
And if that doesn’t help then let us know!
Regards

We’re having a similar issue since the 1.3.3 update. I suspect that the changes for “Tweak – Modify menu CSS for keyboard accessibility.” are the culprit. The desktop version of the menu works fine, but on mobile most menu items (especially 2nd and 3rd level) don’t appear.

As a workaround, I’ve replaced the style.css with the 1.3.2 version in the past, but this is overwritten any time an update is published (e.g. with the recent 1.3.4 version). I’m not sure if there is a CSS overwrite we have in place that is causing this, but I doubt that it’s caused by a plugin. It has been working fine with the same plugins up to 1.3.2.

• This reply was modified 4 years, 2 months ago by majen86.

We are having the same problems with the mobile menu. If it’s possible to just change the color of the disappearing menu items, it would be fixed…
-sites listed below:
https://www.la-simplicite.nl
https://www.sintlodewijk.nl

• This reply was modified 4 years, 2 months ago by creasolconcepts.

I did not waste my time. I went to an accelerate theme – to get rid of the lime green – which is roughly similar to Masonic. Made some CSS changes for the menu, and everything more-or-less works.

The Accelerate Theme is roughly equivalent to the Masonic.

The only problem is its lime green color – which can be modified by CSS.

The menu works better – not perfect – but better.

Hi @cousinfred @creasolconcepts @majen86

Can you once try pasting the following CSS codes in the Additional CSS section and see if it helps?

nav li ul {
    left: auto;
}

Let me know if it works!

Regards,
ThemeGrill

Hi @laraby

If you face any issues you can ask us here on the forum and we’ll gladly help you find a solution. We only want the best experience of our themes for our users. So do not hesitate to post your queries to have the best use of the theme ??

Regards,
ThemeGrill

@nidwija It only partially helps and creates a new issue on the desktop size.

Desktop:

• 2nd level menu items are now displayed all the time (even when the menu isn’t opened)

Mobile:

• Third level menu items now appear ??
• 1st and 2nd level menu items can be clicked
• 3rd level menu items cannot be clicked and all 3rd level items under the same 2nd level item disappear when you try to click on one of them

I’ve reverted the changes for now. Please let me know if you require screenshots to reproduce it.

Wrongly posted. Sorry!

• This reply was modified 4 years, 2 months ago by laraby.

Hi @majen86

Yes, the screenshots would be useful for us to assist you better with this. ??

Regards,
ThemeGrill

Here you go ??

Mobile menu issue since 1.3.3:
https://img.em-upload.de/image/orE
https://img.em-upload.de/image/orr

With fix/workaround from @nidwija – desktop menu screwed up:
https://img.em-upload.de/image/orf (it’s displaying all levels instead of just the 1st level)

With fix/workaround from @nidwija – mobile menu:
https://img.em-upload.de/image/orb (before clicking any menu item – looks better)
https://img.em-upload.de/image/orM (after clicking 3rd level menu item)

Hi @majen86
Can you try this CSS code instead?

@media (max-width: 800px) {
	nav li ul {
		left: auto;
	}
	nav ul ul li:hover > ul, nav ul ul li.focus > ul {
		left: auto;
	}
}
.navigation {
    z-index: 9999;
}

Let me know if this helps! ??

Regards,
ThemeGrill

Hi @nidwija

That last one did the trick and it works, thank you!

Please make sure that is piece of coding is included in future updates.

–Randy

Thanks @nidwija, this did the trick for us as well ??

Hi,
In my site the menu appear correctly but it is all unfolded in mobile devices.
How can I contract the list?
Site: uco.cat

• This reply was modified 3 years, 10 months ago by sayko0.