Center Primary Navigation Menu using CSS tweaks in Canvas

Do you want to align your primary menu to the center but the theme settings does not have the option to do so? You can use CSS tweaks in Canvas to do that. We have prepared a simple tutorial for you on how to do it.

Prerequisite(s):
Canvas Child Theme

Step 1 Login to WordPress control panel

Step 2  Go to Appearance > Editor

Step 3 In Canvas Child: Stylesheet (style.css) file, paste the code below

#navigation {
position: relative;
}
#main-nav {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
.nav li:hover, .nav li.hover {
position: relative;
}
.nav li ul li {
left: 0;
}

Step 4 Click Update File button and go to your online site, your primary menu has now been aligned to the center.

Here is a video tutorial on how to align your primary menu to the center using CSS tweaks in Canvas