Need help? Check out our Support site, then


How to change the alignment of pages in menu

  1. Hello there,

    I would like to align the menu in the center or left of the page, instead of to the right. This is what I have done so far and it's not working:

    #nav li a {
    padding-top:.1em;
    color:#333;
    text-decoration:none;
    text-align:left;
    }
    
    #nav ul li a:hover,#nav ul li:hover > a,#nav ul li.current_page_item > a,#nav ul li.current_page_parent > a,#nav ul li.current_page_ancestor > a,#nav ul li.current-cat > a,#nav ul li.current-menu-ancestor > a,#nav ul li.current-menu-item > a,#nav ul li.current-menu-parent a {
    border:0;
    color:#772124;
    text-decoration:none;
    text-align:left;
    text-transform:capitalize;
    }
    
    #nav ul ul :hover > a {
    border-top:0!important;
    padding-top:4px;
    text-transform:capitalize;
    }
    
    #nav .children li,#nav .sub-menu li {
    background:#F0FFFF;
    border:1px;
    color:white;
    padding-left:4px;
    margin:0 0 0 11px;
    }
    
    #nav ul ul {
    display:none;
    position:absolute;
    top:22px;
    left:0;
    float:left;
    z-index:99999;
    padding:0;
    }
    
    #nav ul ul li {
    min-width:200px;
    text-align:left;
    border:1px;
    }
    
    #nav ul ul a {
    width:200px;
    padding-right:4px;
    }
    
    #nav ul li:hover > ul {
    display:block;
    }
    
    #nav {
    float:center;
    font-size:1.5em;
    text-transform:capitalize;
    font-weight:bold;
    text-align:center;
    font-family:"copperplate gothic light", "Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
    margin:15px 0 10px;
    }
    
    #nav ul {
    position:relative;
    text-align:center;
    padding:0 0 0 20px;
    }
    
    #nav ul li {
    position:relative;
    float:left;
    margin:0 0 0 15px;
    }
    
    #menu {
    text-transform:capitalize;
    padding-bottom:10px;
    text-align:center;
    }
    
    #menu img {
    border:2px solid #eee;
    }

    My blog address: http:collegehillrenovation.com

    The blog I need help with is collegehillrenovation.com.

  2. Give this a try.

    #nav {
        float: none;
    }
    
    #nav ul {
    display: inline-block;
    margin: 2px auto;
    padding: 0;
    position: relative;
    }
  3. hurray! Thank you so much. That worked :)

  4. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags