Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Navi Spacing

  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Navi Spacing

    I'd like the navi links to be centered, and spaced out with more negative space between the words.
    www.jennamichelephotography.com

    Code:
    /* ====================== START NAV ====================== */
    #nav { position:relative; z-index:1000; top:190px; height:25px; border-top:1px solid grey; border-bottom:1px solid grey; }
    #nav ul { margin:-178px 0pt 0pt; list-style:none; }
    #nav li { margin:0 25px 0 0; float:left; padding:185px 0; position:relative; }
    #nav a { display:block; line-height:11px; color:#4f4e4e; text-decoration:none; letter-spacing:1.5px; position:relative; }
    #nav a:hover, #nav .current_page_item a { color:#a10404 }
    
    /* second level */
    #nav ul.sub-menu, #nav ul.children { display:none; position:absolute; padding:5px 10px; margin:18px 0 0; width:150px; background:#fff; border:1px solid #d3d3d3; z-index:100000; -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); }
    #nav ul.sub-menu li, #nav ul.children li { float:none; display:block; padding:10px 0; margin:0; text-transform:none; border-top: 1px solid #DDD; line-height:1em; }
    #nav ul.sub-menu li:first-child, #nav ul.children li:first-child { border:0; }
    #nav ul.sub-menu li a, #nav ul.children a { color:#8c969e; letter-spacing:0; }
    #nav ul.sub-menu li a:hover, #nav ul.children a:hover { color:#333; }     
    
    /* third level */
    #nav ul.sub-menu li ul, #nav ul.children li ul { margin:0; top: -6px; z-index:100; }               
    
    /*indicators*/
    #nav a.sf-with-ul{ min-width:1px; padding-right: 15px; }
    #nav .sf-sub-indicator{position:absolute; display:block; width:10px; height:7px; text-indent:-999em; background: url('images/menu-arrow.png') bottom left; top: 0.25em; left: 110% !important;}
    #nav a:focus >.sf-sub-indicator, 
    #nav a:hover >.sf-sub-indicator, 
    #nav a:active >.sf-sub-indicator, 
    #nav li:hover >a >.sf-sub-indicator, 
    #nav li.sfHover >a >.sf-sub-indicator{background: url('images/menu-arrow.png') top left;}
    
    #nav ul.sub-menu .sf-sub-indicator, #nav ul.children .sf-sub-indicator{ display:block; background: url('images/menu-arrow.png') bottom right; width: 7px; height: 11px; left: 85% !important; top: 0;}
    #nav ul.sub-menu a >.sf-sub-indicator, #nav ul.children a >.sf-sub-indicator{ display:block; background: url('images/menu-arrow.png') bottom right; width: 7px; height: 11px; left: 85% !important; top: 0;}
    #nav ul.sub-menu a:focus >.sf-sub-indicator, 
    #nav ul.sub-menu a:hover >.sf-sub-indicator, 
    #nav ul.sub-menu a:active >.sf-sub-indicator, 
    #nav ul.sub-menu li:hover >a >.sf-sub-indicator, 
    #nav ul.sub-menu li.sfHover >a >.sf-sub-indicator,
    #nav ul.children a:focus >.sf-sub-indicator, 
    #nav ul.children a:hover >.sf-sub-indicator, 
    #nav ul.children a:active >.sf-sub-indicator, 
    #nav ul.children li:hover >a >.sf-sub-indicator, 
    #nav ul.children li.sfHover >a >.sf-sub-indicator{background: url('images/menu-arrow.png') top right; }
    
    /* nojs */  
    body.no_js #nav ul li:hover > ul { display:block }
    body.no_js #nav ul li ul.submenu li:hover > ul, body.no_js #nav ul li ul.children li:hover > ul { display:block }  
    /* ====================== END NAV ====================== */

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    1. For link spacing, on line 772 of style.css:

    Code:
    #nav li {
       margin: 0 0 0 25px;
    }
    change to:
    Code:
    #nav li {
       margin: 0 0 0 65px;
    }
    2. For letter-spacing, on line 90 of style.css:

    Code:
    #nav a { display:block; line-height:11px; color:#4f4e4e; text-decoration:none; letter-spacing: 1.5px; position:relative; color:#769b9d; }
    change to:
    Code:
    #nav a { display:block; line-height:11px; color:#4f4e4e; text-decoration:none; letter-spacing: 0; position:relative; color:#769b9d; }
    Last edited by Sammy12; 03-25-2012 at 07:18 PM.

  • Users who have thanked Sammy12 for this post:

    jshumate (03-26-2012)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks, trying to move the navi links to the center now.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    For this specific case:

    Code:
    #menu-main-menu {
        padding-left: 80px;
    }

  • Users who have thanked Sammy12 for this post:

    jshumate (04-01-2012)

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Perfect!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •