Hi,

I have a site where I used the suggestion from this post: www.ari-soft.com/ARI-Ext-Menu/40507-Trouble-with-centering-menu.html#40507 on how to center the menu. It worked great for desktop, but when I look at the site on a smartphone, the menu is left justified instead of centered. How do I get the menu to center on smartphones?

See: www.xeva.ca/contact-us

Thank you.

Hello,

The problem occurs because specific CSS rules are used by site template for mobile devices. Add the following CSS rule:

#topnav .ux-menu-container ul.ux-menu
{
display: inline-block !important;
}

Regards,
ARI Soft

Hi,

If I add the line you said above, then the background image vecomes very wide on mobile devices.

Is there anything else I can do to center the menu on mobile?

Thank you.

Hello,

Send an image please where we can see the problem.

Regards,
ARI Soft

Hi,

Here is the image with inline-block set:


Thank you for your help.

template.css file from site template contains the following CSS rules:

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#topnav .ux-menu-container ul.ux-menu {
display:block;
}
}
/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
#topnav .ux-menu-container ul.ux-menu {
display:block;
}
}

which is defined "display: block" property instead of "display: inline-block" for mobile devices.

Regards,
ARI Soft