How to center our horizontal Navigation menu in Sydney

We are noobs and are having touble centering our Nav menu.

We’ve tried inline-block and many others but, nothing seems to be working for us.

PLease help!

Thanks!

Here is our current CSS:
/* navigation /
#mainnav {
display: inline-block;
float: center;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
header nav ul{display:inline-block;}
#mainnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#mainnav li {
display: inline-block;
padding: 0 14px;
}
#mainnav ul ul li {
padding: 0;
}
#mainnav ul li a {
position: relative;
display: inline-block;
font-size: 14px;
font-family: “Raleway”, sans-serif;
color: #fff;
font-weight: 500;
text-decoration: none;
outline: none;
}
#mainnav ul li a:hover {
color: #d65050;
}
#mainnav ul ul a {
width: 180px;
font-family: “Source Sans Pro”, sans-serif !important;
}
#mainnav > ul > li:last-child {
padding-center: 0;
}
#mainnav ul li {
position: relative;
}
#mainnav ul li ul {
width: 180px;
position: absolute;
top: 100%;
left: initial;
opacity: 0;
visibility: hidden;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
-o-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#mainnav ul li ul ul {
top: 0;
}
#mainnav ul li ul:after {
content: “”;
position: absolute;
left: 0;
width: 100%;
height: 1px;
}
#mainnav ul li ul ul:after {
top: 0;
}
#mainnav ul li ul li ul {
left: 100%;
}
#mainnav li:hover > ul {
opacity: 1;
padding-top: 10px;
visibility: visible;
left: auto;
display: block !important;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#mainnav li:hover > ul ul {
padding-top: 0;
left: 100%;
}
#mainnav .sub-menu {
z-index: 99999;
}
#mainnav .sub-menu li a {
color: #fff;
display: block;
line-height: 30px;
background: #1c1c1c;
padding: 0 18px;
border-top: 1px solid #252525;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#mainnav .sub-menu li:hover > a {
color: #fff;
}
#mainnav li:hover > .sub-menu > li > a {
padding: 8px 18px;
}
/
Icons */
#mainnav ul li::before {
font-family: Fontawesome;
color: #fff;
float: center;
margin: 5px 5px 0 0;
font-size: 14px;
line-height: 1;
font-weight: 400;
}
#mainnav ul li a {
float: center;
}
#mainnav .sub-menu li:before {
content: ‘’;
margin: 0;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}
#mainnav-mobi ul li a {
float: none;
}
#mainnav-mobi ul li::before {
content: ‘’;
}

Hi there,

You can centering the menu from: Customize > header area > menu style > Centered (menu and site logo)

Regards,
Awan

This doesn’t work in Great Mag. There is no option for this. Can you please let me know how to center the main nav under a centered logo?

Thank you,
j

Hi J,

Its different between Sydney theme and GreatMag theme. Please post new thread for your issue in GreatMag forum instead.

Regards,
Awan