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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    extended horizontal nav bar

    Right now I have a wordpress theme that has a solid black bar for its main navigation at the very top of the site. How would I go as to make it extended across the whole horizontal axis and with an repeated image over it.

    my site is www.ravegrounds.com

    i want the nav bar to be like www.threadless.com

    /* 2.1 Containers & Columns */
    #wrapper { background: url() no-repeat center top; }

    .col-left { float: left; }
    .col-right { float: right; }
    .col-full { width: 940px; margin: 0 auto; }

    /* 2.2 Navigation */
    .nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; }
    .nav a { position:relative; display:block; z-index:100; }
    .nav li { float:left; width: auto; }

    #top-nav { font-size: 12px; background: #000; }
    #top-nav a { line-height: 50px; color: #939497; border-right: 0px solid #414141; padding: 5px 10px; }
    #top-nav a:hover, #top-nav li.current_page_item a, #top-nav li.current_page_parent a { color: #fff; }
    #top-nav li ul { background: #000; border: none; }
    #top-nav li ul li { background: none; border-top: 1px solid #414141; }
    #top-nav li ul li a { line-height: 18px; background: none; border: none; }
    #top-nav li a.sf-with-ul { padding-right: 20px; }
    #top-nav li ul li a.sf-with-ul { padding:5px 10px; }

    #main-nav { font: bold 15px Helvetica, Arial, sans-serif; border: 0px solid #dee3e7; margin-bottom: 40px; background: #fff url() repeat-x left bottom; }
    #main-nav li { border-right: 0px solid #dee3e7; }
    #main-nav a { padding: 5px 20px 2px; line-height: 30px; color:#555; border-bottom: 4px solid #cacaca; }
    #main-nav a:hover, #main-nav li.current_page_item a, #main-nav li.current_page_parent a { border-bottom-color: #dc3e29; color: #000; text-decoration: none; }
    #main-nav a:hover, #main-nav li.current-cat a, #main-nav li.current-cat a { border-bottom-color: #dc3e29; color: #000; text-decoration: none; }

    #main-nav li ul { background: #FFF; border: 1px solid #dbdbdb; border-width:1px 1px 0; }
    #main-nav li ul li { background:#eee; border-top:1px solid #fff; }
    #main-nav li ul li a { padding: 0 10px; font-size: 12px; border-bottom: 1px solid #dbdbdb; }
    #main-nav li ul li a:hover { border-color: #dbdbdb; background: #dbdbdb; }

    /* 2.2.1 Drop-down menus */
    .nav li ul { position: absolute; left: -999em; width: 180px; z-index:999; }
    .nav li ul li a { width:160px; }
    .nav li ul ul { margin: -26px 0 0 180px; }

    .nav li:hover,.nav li.hover { position:static; }
    .nav li:hover ul ul, .nav li.sfhover ul ul,
    .nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
    .nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
    .nav li:hover ul, .nav li.sfhover ul,
    .nav li li:hover ul, .nav li li.sfhover ul,
    .nav li li li:hover ul, .nav li li li.sfhover ul,
    .nav li li li li:hover ul, .nav li li li li.sfhover ul { left:auto; }

    .nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:0.9em;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
    .nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat;}
    #top-nav .sf-sub-indicator { top: 1.2em; }
    #top-nav li ul .sf-sub-indicator { top: 0.9em; }
    #main-nav .sf-sub-indicator { top: 1.1em; }
    #main-nav li ul .sf-sub-indicator { top: 0.9em; }
    #top-nav .nav-item-right { float: right}
    #top-nav .nav-item-right a {padding-top:8px }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello ikidunot,
    Right now you style #top-nav with .col-ful which limits it to being 1000px wide.
    Move #top-nav out of #wrapper and remove that class,
    like this -
    Code:
     <div id="top-nav">
    		
            <ul class="nav sf-js-enabled">
    			            	
    	            	            <li class="page_item current_page_item"><a href="http://ravegrounds.com">Home</a></li>
    	            <li class="page_item page-item-2"><a href="http://ravegrounds.com/?page_id=2" title="About">About</a></li>
    <li class="page_item page-item-3"><a href="http://ravegrounds.com/?page_id=3" title="Forums">Forums</a></li>
    	            
               	       <li class="nav-item-right"><a href="http://ravegrounds.com/?feed=rss2"><img src="http://ravegrounds.com/wp-content/themes/Spectrum%20v1.0.2/images/ico-rss.png" alt="RSS Feed"></a></li>   
            </ul><!-- /#nav -->
                   
    	</div><!-- /#top-nav -->
    
    
    <div id="wrapper">
    
    	
               
    	<div id="header" class="col-full">
     		       
    		<div id="logo">
    Then make your style.css look like this -
    Code:
    .nav li  { float:left; width: auto; }
    
    #top-nav  { 
    width: 100%;
    font-size: 12px; 
    background: #000; 
    overflow: auto;
    }
    #top-nav a  { line-height: 50px; color: #939497; border-right: 0px solid #414141; padding: 5px 10px; }
    #top-nav a:hover, #top-nav li.current_page_item a, #top-nav li.current_page_parent a  { color: #fff; }
    #top-nav li ul
    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ikidunot (05-29-2010)

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That worked perfectly, thank you. I have another question though, in order to get the links back to where they were earlier, which was towards the center of the page, would I have to set absolute positioning for those links?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by ikidunot View Post
    That worked perfectly, thank you. I have another question though, in order to get the links back to where they were earlier, which was towards the center of the page, would I have to set absolute positioning for those links?
    Give your ul.nav a width and position that. No need for absolute positioning.
    Try this -
    Code:
    .nav { 
    width: 1000px;
    /*z-index:99; this is not doing anything*/
    margin:0 auto; 
    padding:0; 
    list-style:none; 
    line-height:1; 
    }
    Adjust that width to suit.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ikidunot (05-29-2010)


  •  

    Posting Permissions

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