Center and stretch navbar to 100%
-
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; }
Viewing 6 replies - 1 through 6 (of 6 total)
Viewing 6 replies - 1 through 6 (of 6 total)
- The topic ‘Center and stretch navbar to 100%’ is closed to new replies.