[resolved] Center nav menu text? (Pitch Theme) (9 posts)

  1. DanceMediaArtist
    Posted 4 years ago #

    Good morning,

    I'm currently running the Pitch theme. I would like to center the text in the main navigation menu, but since the width of the bar isn't set I'm having a heck of a time figuring it out. Even when I set the width, I still can't seem to get the hang of it.

    My website is at http://lisbonemergency.com .

    I'd appreciate any suggestions!


  2. zex2911
    Posted 4 years ago #

    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.

  3. DanceMediaArtist
    Posted 4 years ago #

    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.

  4. aszufnara
    Posted 3 years ago #

    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 :)

  5. Andrew Nevins
    Forum moderator
    Posted 3 years ago #


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

  6. aszufnara
    Posted 3 years ago #

    sure I can but I have exactly the same problem as DanceMediaArtist so I didn't want to make a mess :)

  7. DanceMediaArtist
    Posted 3 years ago #

    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.

  8. DanceMediaArtist
    Posted 3 years ago #

    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;

  9. dlnsparks
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic