No Widget and no mobile settings show up on mobile

Hi thegreen,

Unfortunately there is not much I can do to help without seeing the site in my own browser. Please can you get back to me once it is online so I can take a look?

Regards,
Tom

Hi Tom,

Thank you for your reply. I can’t wait till I published my website to find out if I should use this plugin. I have 80+ categories but only a few plugins on my site so i built a simple demo site with all the plugins I use but only a few categories to re-create a simpler version of my site and how on mobile the mega menu is not behaving as expected so that you can take a look.

Please go to
https://home.flywheelsites.com/

user name: flywheel
password: megamenu

then login as admin by using
username: max
password: megamenu

You’ll find om mobile, widget no show (so far I need Category widget specifically) and since I have so many categories I’m hoping to have a different background color on sub-menu than the color on the top level menu to make it much easier to read on mobile.

Thank you.

Hi thegreen,

Thanks.

Please can you try this:

https://www.megamenu.com/documentation/easymag/

PS these forums are public, so you should not share passwords. If you still have the ability to edit your last reply, please remove those details. If not, take down the flywheel staging site of give it a new url ??

Hi Tom,

Thank you very much for the warning regarding sharing password. But if I don’t do that, how can you troubleshoot? Is there another way folks here do this?

For me right now to solve this issue is more important so i kept the above credential unchanged so oyu can still get into the demo site to test if necessary. once we’re done with this, i’ll delete everything.

Now I used the CSS codes in the link you provided me. Although it sort of work, the demo site I created contained only 2 menu items whereas in my real site, it has 7 and maybe more since I’m not done with building it yet. So I added more items to the demo site menu so it will resemble my real site and the problem now it has are:

When looking at the tablet screen, you can see the 2 far right menu tabs have 3 layer and the 3rd layer is cut by the screen. On the mobile screen the bottom tabs are terribly cut, plus the menu occupying half of the screen height so it’s just not going to work. I chose flyout because that’s the most compact one among the 3 choices already.

Thank you.

I forgot to mention I enabled the top-bar menu (and max mega menu for it) which is the 3 short horizontal lines at the very top left-hand corner and as you can see, it does not reflect the mega menu format. Thank you.

Hi Thegreen,

Your themes header if fixed (even on mobile, which normally it wouldn’t be, because it causes the problem you describe), but it can be worked around by adding a scrollbar to the mobile menu:

https://www.megamenu.com/documentation/how-to-add-a-scrollbar-to-the-mobile-menu/

Regarding the top bar menu, that doesn’t look like it is suitable to use with MMM, so if you need to adjust how that looks or behaves you would need to contact your theme authors.

Regarding the sub menus going off the screen, you would need to set the Sub Menu Align to “Right Edge of Parent” in the menu item settings:

https://www.megamenu.com/documentation/menu-item-options/

Regards,
Tom

Hi Tom,

Thank you again for the helpful info.

I was able to unstick my theme header menu so now I can scroll down the menu on mobile, but setting to “Right Edge of Parent” made it get cut on the left side besides looking really weird and counter-intuitive. So instead I shorten the sub-menu width from 250px to 225px and move the 2 tabs that have 3 layer to the far left of the menu bar, and that sort of solve the problem.

The only thing I’d still need your help now is on the 2 menu tabs that have 3 layers, on mobile both 2nd and 3rd layer are the same color. If it is possible I can make them different colors, that will make it so much easier to read on the small mobile screen. So is that possible? Thank you.

Best regards,

Hi thegreen,

This is a little outside the usual level of support we provide (custom coding), but try going to Mega Menu > Menu Themes > Custom Styling and add the following:

@include mobile {
    #{$wrap} #{$menu} > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu a.mega-menu-link {
        background: #ccc;
    }
}

Regards,
Tom

Hi Tom,

Sorry.. didn’t realize my question was over the free level. Thank you for being so kind providing the CSS. Hopefully my site will do well after launching and can use the pro version then especially considering my site is category heavy.

Sincerely,