Center nav menu text? (Pitch Theme)

Don’t know will you like it, as it’s not the cleanest solution, but if you will not change top navigation links, you can do something like this:
in style.css, around line 296 (for ul#mainmenu-menu li.menu-item a)change padding to ‘padding:20px 28px;’
than add the following

#menu-item-205 a {
padding: 20px 23px !important;
}
#menu-item-205 {
border-right: 0 !important;
}

It’s not really clean solution, so if someone has better one, use that instead of this.

Unfortunately, that solution doesn’t work. I need a flexible solution.

Although the width of the body is fixed at 960px, for some reason the menu bar appears differently on different computers. On some, the last item wraps around to the next line. On others, there’s a huge amount of space at the right end of the bar.

I’ve adjusted the padding so it just fits on the screen that (for some reason) has the biggest problem with wrapping, but I’m still stuck with the space everywhere else.

Hey guys, I have the same problem as DanceMediaArtist. Can anybody help me to adjust(center) text and buttons in the main menu navigation bar. Last solution unfortunatelly doesn’t work. Thank’s in advance for any help ??

aszufnara,

Can you create your own thread, with a link to your website as well?

sure I can but I have exactly the same problem as DanceMediaArtist so I didn’t want to make a mess ??

I found the solution to this. I will post it and then close the topic. Give me a little bit find the code that finally worked.

This is the entire CSS that I used to center the lower menu bar on the Pitch theme. Originally it didn’t support child themes, so I made changes to the actual code. I’m working on updating with a child theme, which would actually be your best option. Good luck.

/* =Main Menu
————————————————————– */

#mainmenu {
margin: 10px 0;
margin-bottom: 0;
word-wrap: break-word;
}

ul#mainmenu-menu {
height: 42px;

background: rgb(247,247,247);
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
border: 1px solid #E2E2E2;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f7f7f7′, endColorstr=’#f4f4f4′,GradientType=0 );
text-align: center;
}

ul#mainmenu-menu li.menu-item {
position: relative;

display: inline-block;
font-size: 12px;
font-weight: bold;
}

ul#mainmenu-menu li.menu-item a {
color: #5e5e5e;
display: block;
padding: 15px 20px;
text-decoration: none;
}

ul#mainmenu-menu li.menu-item a:hover {
background: #C9C9C9;
}

ul#mainmenu-menu ul.sub-menu {
position: absolute;
top: 42px;
left: 0px;
width: 160px;

background: white;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
display: none;
z-index: 99;
}

ul#mainmenu-menu li:hover ul.sub-menu {
display: block;
}

ul#mainmenu-menu ul.sub-menu li {
border: none;
font-weight: normal;
}

ul#mainmenu-menu ul.sub-menu li a {
line-height: 15px;
padding: 15px 15px 15px 15px;
}

Can anyone tell me how to change the COLOR of the main menu? We’d like it a dark grey. Thanx!