WordPress.org

Ready to get started?Download WordPress

Forums

Motion
Centering Primary Menu (9 posts)

  1. dwbjd
    Member
    Posted 1 year ago #

    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.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you familiar with CSS?

  3. dwbjd
    Member
    Posted 1 year ago #

    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;

    }

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

  5. dwbjd
    Member
    Posted 1 year ago #

    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.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

  7. dwbjd
    Member
    Posted 1 year ago #

    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) */
    }

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  9. dwbjd
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.