Menu is not centered when using small computers 13" and below

[sakirose]

On our website, when you make your browser smaller or use a smaller computer (13″ and below), the menu is no longer centered. I have the following CSS in place to center the menu and it works on my computer which is a 15″ laptop.

/* spacing below menu text */
.inner-page-wrap.no-top-spacing {
margin-top: -30px !important;
}

/* menu font size */
nav.std-menu .menu li {
font-size: 20px;}

/* menu position and padding */
#main-navigation > div {
margin-right: 100px;
padding-top: 20px;
}

/* menu li item right margin spacing – space between items */
nav#main-navigation .menu > li {
margin-right: 60px !important;
}

[Swift Ideas – Ed]

That code wouldn’t work responsively. The easiest way to center the menu is to remove that css, and just use this:

nav#main-navigation ul.menu {
float: none;
text-align: center;
width: 100%;
}
#main-navigation .menu li {
float: none;
}

Hope that helps.

– Ed

[sakirose]

Thanks Ed. That works better overall, but the menu is still shifted left a little. Can you advise?

[Rui Guerreiro – SUPPORT]

This additional css bellow may work for these lower resolutions.

nav#main-navigation ul.menu{
margin-left:25px!important;
}

-Rui