Trying to center a nav menu and I'm lost.

  • Unknown's avatar
    complaintatlaw · Member ·

    Sorry folks, I’ve done some searching and googling and tried lots of things but my CSS skills are very limited.

    I’m trying to simply center the items in this nav bar for the following site:
    http://www.allen-law.com. Any advice would be most appreciated.

    Here’s the css on the style sheet:

    /* ———- PRIMARY NAVIGATION ———- */

    #primary-nav {
    width: 960px;
    margin: 5px -40px 0 -11px;
    padding: 0 10px;
    height: 73px;
    position: relative;
    z-index: 2000;
    font-family: Georgia;
    font-style: italic;
    }

    #primary-nav ul {
    }

    #primary-nav ul li {
    float: left;
    /*height: 62px;*/
    position: relative;
    }
    #primary-nav ul li:hover {

    }

    #primary-nav ul li a {
    display: block;
    padding: 20px 12px;
    height: 22px;
    color: #fff;
    text-decoration: none;
    text-shadow: #000 1px 1px 1px;
    font-size: 16px;
    }

    #primary-nav ul li ul {
    position: relative;
    top: 60px;
    z-index: 10000;
    background: url(images/common/nav-dropdown-bg.png) repeat 0 0 transparent;
    display: none;
    padding: 8px 10px 5px 10px;
    min-width: 225px;
    max-width: 400px;
    -moz-box-shadow: 2px 2px 0px #242424;
    -webkit-box-shadow: 2px 2px 0px #242424;
    box-shadow: 2px 2px 0px #242424;
    }
    #primary-nav ul li ul li {
    float: none;
    display: inline;
    position: relative;
    z-index: 1000;
    }
    #primary-nav ul li ul li a {
    font-size: 14px;
    padding: 2px 10px;
    }
    #primary-nav ul li ul li a:hover {
    background: none;
    text-decoration: underline;
    }

    #primary-nav ul li:hover ul {
    display: block;
    position: absolute;
    }

    #secondary-nav {
    background: url(images/common/sub-nav-bg.png) repeat-x 0 0 transparent;
    width: 958px;
    margin: -11px 0 0 0;
    height: 53px;
    border-bottom: 1px solid #878787;
    }

    #secondary-nav ul li {
    float: left;
    height: 42px;
    }

    #secondary-nav ul li a {
    padding: 13px 14px;
    display: block;
    color: #363636;
    font-family: Georgia, serif;
    font-style: italic;
    text-decoration: none;
    }
    #secondary-nav ul li a:hover {
    text-decoration: underline;
    }

  • Unknown's avatar
    complaintatlaw · Member ·

    Ok, I talked to the people who made the template and they are saying it would involve a lot of coding. Is that true?

    Additionally, they said that it would be easier just to make some space in the left margin so that it appears centered. Is that true? Is that an acceptable plan? If so, how the heck do I do it?

    Any help would be wonderful!!

  • Unknown's avatar
    houstonweaver · Member ·

    Your site does not appear to be hosted at WordPress.com. We use a different and more limited version of the WordPress software. Check with the support forum over at WordPress.org.

    http://wordpress.org/support/

  • Unknown's avatar
    complaintatlaw · Member ·

    Oops! My bad… Sorry about that!!

    Thank you for your reply.

  • Unknown's avatar
    houstonweaver · Member ·

    Good luck.

  • Unknown's avatar
    designsimply · Member ·

    I think you can do it pretty easily if you give the menu list a fixed width. 

    #menu-main-menu {
	display: block;
	float: none;
	width: 890px;
	margin: 0 auto;
}

    Note that if you change the font or the menu items or anything that makes the menu any wider than it is now, you will need to adjust the width value in this CSS to match.

    (I couldn’t help myself. However, please post future questions to the http://wordpress.org/support/ forum or to the theme author.)

  • The topic ‘Trying to center a nav menu and I'm lost.’ is closed to new replies.