Centering the Main Menu?

[sakirose]

How can we center the main menu of our site and add some space (padding) between menu items (see the link given above)?

[Kyle – SUPPORT]

Add this to your custom css:

@media only screen and (min-width: 991px) { 
nav#main-navigation .menu > li, .header-4 #main-navigation .menu > li, .header-5 #main-navigation .menu > li, .header-7 #main-navigation .menu > li {
  padding: 0 50px 20px;
}
}

– Kyle

[sakirose]

What about centering it? I used this to get the spacing right, but now I jsut need to center it:

@media only screen and (min-width: 991px) {
nav#main-navigation .menu > li, .header-4 #main-navigation .menu > li, .header-5 #main-navigation .menu > li, .header-7 #main-navigation .menu > li {
padding: 0 20px 20px;
}

[sakirose]

UPDATE: I had to take that code out entirely because it had this odd effect where people could not click on home or about menu items. it was like the mouse was not hovering over it – even when it actually was.

So, we’re back to trying to center the menu and creating space between menu items without breaking functionality.

[sakirose]

2nd UPDATE: Another forum offered this great solution below that is better with responsive design, but again the HOME and ABOUT no longer work.

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

Also still need the items spaced a touch.

[Kyle – SUPPORT]

Add this to your custom css:

nav#main-navigation .menu > li, .header-4 #main-navigation .menu > li, .header-5 #main-navigation .menu > li, .header-7 #main-navigation .menu > li {
  padding: 0 20px 20px;
}

– Kyle

[Kyle – SUPPORT]

And this:

.logo-left {
  display: none;
}

– Kyle