The theme is based on Bootstrap, a popular front-end framework. You have to take into account Bootstrap’s default styles and eliminate them when customizing.
Try this code. It’s untested (I don’t have the theme installed) but it should work:
@media (min-width: 768px) {
/* overwrite Bootstrap's default styles */
.navbar .navbar-nav {
display: inline-block !important;
float: none !important;
}
/* centering */
.navbar .navbar-collapse {
text-align: center;
}
}
The @media (min-width 768px) {} line tells the web browser to only apply the style when the screen is 768px or higher; thus leaving the mobile layout untouched.