WordPress.org

Ready to get started?Download WordPress

Forums

Center and stretch navbar to 100% (7 posts)

  1. bmeredith84
    Member
    Posted 1 year ago #

    I am trying to center and then stretch my navbar list items to 100% of the navbar. I have tried to add width:100%;, and some other things. Here is the code any help would be appreciated!

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    /* -- 11.0 Primary Navigation -- */
    #primary-nav { width: 940px; margin: 0 auto 20px auto; height: 40px; background: -webkit-gradient(linear, left top, left bottom, from(#a1a1a1), to(#525252)); 
    
     }
    #primary-nav ul { margin: 0; padding: 0  ; list-style: none;line-height: 40px; }
    #primary-nav ul a 
    
    { 
    
    	display: block;
    	position: relative;
    	font-family:"sans", Times, serif;
    	font-size: 13px;
    
    }
    
    #primary-nav ul li { float: left; position: relative;   }
    
    #primary-nav ul li:hover 
    
    { 
    
    }
    
    #primary-nav ul ul { position: absolute; top: -9999em; width:180px; /* left offset of submenus need to match (see below) */ }
    #primary-nav ul ul li { width: 156px; }
    
    	/* Make sub menus appear */
    	#primary-nav ul li:hover ul,
    	#primary-nav ul li.sfHover ul { left: 0; top: 40px; /* match top ul list item height */ z-index: 99; }
    
    	/* Hide all subs subs (4 levels deep) */
    	#primary-nav ul li:hover li ul,
    	#primary-nav ul li.sfHover li ul,
    	#primary-nav ul li li:hover li ul,
    	#primary-nav ul li li.sfHover li ul,
    	#primary-nav ul li li li:hover li ul,
    	#primary-nav ul li li li.sfHover li ul { top: -9999em; }
    
    	/* Displays all subs subs (4 levels deep) */
    	#primary-nav ul li li:hover ul,
    	#primary-nav ul li li.sfHover ul,
    	#primary-nav ul li li li:hover ul,
    	#primary-nav ul li li li.sfHover ul,
    	#primary-nav ul li li li li:hover ul,
    	#primary-nav ul li li li li.sfHover ul { left: 179px; /* match .nav ul width */ top: 0;  }
    
    	/* Primary Navigation Skin  */
    	#primary-nav ul { font-size: 13px; text-transform: capitalize; }
    
    	/* top level skin */
    	#primary-nav ul li { border-right: 1px solid #fff; }
    	#primary-nav ul a { padding: 0 12px; color: #333; height: 40px; line-height: 40px; }
    	#primary-nav ul a:hover,
    	#primary-nav ul li.sfHover a,
    	#primary-nav ul li.current-cat a,
    	#primary-nav ul li.current-menu-item a
    	{ text-decoration: none; color: #f8f8f8; background: #333; text-shadow: 0 -1px 1px rgba(0,0,0,0.7); -moz-border-radius: 2px 2px 0 0; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; }
    
    	/* 2nd level skin */
    	#primary-nav ul ul { padding: 10px 0 15px 0; background: #333; -moz-border-radius: 0 0 2px 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.5); }
    	#primary-nav ul ul li { height: 30px; line-height: 30px; border: none; padding: 0 12px; float: none; }
    	#primary-nav ul ul li a { line-height: 30px; height: 30px; }
    	#primary-nav ul li.sfHover ul a { color: #ccc; background: url(images/bg-primary-menu-bevel.gif) left top repeat-x; padding: 0 5px; }
    	#primary-nav ul li.sfHover ul li:first-child a { background: none; }
    	#primary-nav ul li.sfHover ul a:hover { color: #f8f8f8; }
    
    	/* 3rd level onwards */
    	#primary-nav ul ul ul { padding: 0; -moz-border-radius: 0 2px 2px 0; -webkit-border-bottom-left-radius: 0; -webkit-border-top-right-radius: 2px; }
    	#primary-nav ul ul li.sfHover, #primary-nav ul ul li.sfHover, #primary-nav ul ul a:focus, #primary-nav ul ul a:hover, #primary-nav ul ul a:active { outline: 0; }
  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    May you also provide the HTML for the navigation?
    Remember to wrap your code using backticks or the (code) button provided above your post.

    [ Moderator Note: Please be aware that not using the code button or backtick is not a good reason to tag a post with modlook. ]

  3. bmeredith84
    Member
    Posted 1 year ago #

    Ahh thank you, here is the website:

    http://tendig.com/

    How do I provide the HTML for the navigation? I'm very new to this.

    Thanks Andrew.

  4. bmeredith84
    Member
    Posted 1 year ago #

    And the navbar itself is the right width, 940 pixels. I basically want the list items to be stretched to the whole 940 pixels. So if I have two buttons I want those to be 470 pixels each. If I add a third button then I want it to automatically stretch and fill accordingly.

  5. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    if I have two buttons I want those to be 470 pixels each. If I add a third button then I want it to automatically stretch and fill accordingly

    I don't think this would be possible with CSS, sorry.

  6. bmeredith84
    Member
    Posted 1 year ago #

    So what should I do to do my best to center the buttons, or make it appear that they stretch the whole length of the navbar?

  7. bmeredith84
    Member
    Posted 1 year ago #

    Or any good menu plugins I can download that anyone knows of?

Topic Closed

This topic has been closed to new replies.

About this Topic