Try this. You may have to adjust depending on your logo size and typeface, but this worked for me. Everything stays fairly centered as devices get smaller as well. I can’t figure out how to solve the nav wrap on an iPad though, which is what brought me to the forum today : )
#header-left-section {
float: none;
margin: auto;
}
#header-logo-image {
float: none;
margin-left: 21%;
margin-right: 20%;
}
#header-right-section {
float: none;
}
.main-navigation {
float: none;
padding-top: 25px; /* adds some air under the logo */
margin-left: 18%;
margin-right: 18%;
min-width: 70%;
}
.main-navigation li {
padding: 0px 50px 0px 0px; /*change this depending on your own tastes*/
text-align: center;
}
