WordPress.org

Support

Support » Themes and Templates » Centering Primary Menu

Centering Primary Menu

  • Could you tell me how to center the contents of the primary_menu. For example I have 5 categories that are horizontal menu categories with dropdown sub categories. The horizontal links leave blank space to the right of them and are aligned left. So centering them is needed so there is equal space on left and right sides.

    Hope you can help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Are you familiar with CSS?

    I would say I am intermediate css level. I’ve tried a few things, but it doesnt do what i’m wanting. Any help is highly appreciated.
    Here’s css for menu in motion theme.

    .primary_menu {
    width: 980px;
    background: url(images/blacktrans-menu.png);
    }

    .primary_menu li {
    float: left;
    line-height: 1.5em;
    margin: 5px 0 5px 5px;
    background-color: #333333;

    }

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    It helps for centering drop down sub items, rather than left alignment. The main menu buttons are what I’m trying to center. Just want equal spacing left/right of main menu items instead of having whatever space is left over depending on the names of buttons. Of course the more text and buttons I add it will fill the menu line and eventually will spill over to next if too many for the line. So even if I just have one button in main menu it should be dead center rather than all the way left.
    Thanks so much. Maybe this helps clarify what I’m after.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    I am reading this is solution a few places from your links. But its not working. Perhaps you can help? Thanks so much for feedback.
    display: table;
    margin: 0 auto;

    Menu CSS:
    .primary_menu {
    width: 980px;
    background: url(images/blacktrans.png);
    }
    .primary_menu li {
    float: left;
    background: url(images/blacktrans.png);
    line-height: 2em;
    margin: 5px 0 5px 5px;
    }
    .primary_menu li:hover {
    background: url(images/blacktrans2.png);
    }
    .primary_menu li a {
    display: block;
    margin: 0;
    font-size: 0.8em;
    color: #fff;
    padding: 0 13px;
    }
    .primary_menu li a:hover {
    color: #afdaff;
    text-decoration: none;
    display: block;
    }
    .primary_menu li ul {
    position: absolute;
    width: 180px;
    left: -999em;
    padding-top: 5px;
    margin: 0;
    }
    .primary_menu li:hover ul,.primary_menu li.sfhover ul {
    left: auto;
    }
    .primary_menu li li {
    padding: 0;
    margin: 0;
    width: 180px;
    line-height: 1.5em;
    }
    .primary_menu li li a {
    color: #fff;
    margin: 0;
    padding: 7px 13px;
    background: url(images/blacktrans3.png);
    }
    .primary_menu li li ul li {
    margin-left: 13px;
    }
    .primary_menu li li a:hover {
    color: #afdaff;
    }
    .primary_menu li:hover,.primary_menu li.sfhover {
    position:static; /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
    }

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    I think you need the support of a CSS-specific forum like http://csscreator.com/forum

    Seriously? This WP theme I’m trying to center the menu on has been DLed 327,631 times. I can’t be the only one that wants this. Thanks anyway for trying.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Centering Primary Menu’ is closed to new replies.