Mobile Menu not displaying properly since XTheme update

[Diane_Mitchell]

Hi there

I have just updated the X Theme on my clients website, and the mobile menu is no longer displaying correctly - it was displaying across the entire screen, now it’s only showing a 1cm menu, so you can’t read the words. Site is : www.wonderfulworldofwellbeing.com

Can you please tell me where I’d find the mobile menu settings as I can’t see it within the theme options anywhere.

The update also resets the desktop headings to 25%, but I’ve found that setting and changed it back to 20% so that’s fixed. It’s just the mobile menus now.

Thank you.

[Prasant]

Hello Diane,

Thanks for writing in!

Inspecting the website I see that a custom CSS code has been added that’s causing the menu to shrink in mobile devices. Having said that I see that the actual intent of adding the CSS was to make certain changes into desktop navigation. Here’s the CSS code that I am referring:

.menu-item {
    width: 20%;
    background-color: #0898D6;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    text-align: center;
}

Above code with target both, desktop and mobile navigations. To limit the effect onty to Desktop Menu, please remove width: 20% from above code and add following CSS under X > Theme Options > CSS:

@media screen and (min-width: 800px) {
 .menu-item {
    width: 20%;
}
}

Thanks.

[Diane_Mitchell]

That’s fantastic! All fixed. Thanks for your help - I really appreciate it.

[rad]

You’re most welcome!