Thanks Sakin.
Please visit: http://www.lisaboslett.com/wordpress_test/
The custom css I’ve used is below.
I’m looking for the menu to span the entire container, which it now does. I used a width of 12.5% in ul li, since there are 8 menu items. I’m sure there’s a better way, but that will do for now.
The issue I’m having is that the a link is not spanning the entire width of the li tag. I also need the link text to be centered. So ‘Home’ should span up to ‘BIO’, ‘BIO’ should span up to ‘Services’, etc. And the last menu item – ‘FAQ’ – should span up to the edge of the container.
Thanks for your help.
#main #content .entry-title { display: none;}
#main #content {
width: 900px;
}
body {
background-color: #4b5c6e;
}
#header {
background-image: none;
background-color: #4b5c6e;
border-bottom: none;
}
#headimg {
margin-top: 0;
}
#header .logo-wrap {
display: none;
}
#header .social-search {
display: none;
}
#header #mainmenu {
margin-top: 0;
}
#header .top-bg {
display: none;
}
#header .bottom-bg {
padding-top: 0;
border: none;
}
#main {
min-height: 650px;
background-color: #E0E4E9;
}
#footer {
background-color: #4b5c6e;
border-top: 0;
height: 30px;
padding-top: 10px;
}
#header #mainmenu ul li:link > a { color: #000; }
#header #mainmenu ul li:visited > a { color: #000; }
#header #mainmenu ul li:hover > a { color: #fff; }
#header #mainmenu ul li:active > a { color: #000; }
#header #mainmenu ul li.current-menu-item a { color: #fff; }
#header #mainmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#header #mainmenu ul li {
float: left;
width:12.5%;
text-align: center;
border-right: 0px solid;
}
#header #mainmenu ul li a {
display:block;
padding: 5px;
color: #fff;
text-decoration: none;
border-style: solid;
border-width: 0px 5px 0px 5px;
background: -webkit-linear-gradient(#e0e4e9, #2b4f75); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#e0e4e9, #2b4f75); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e0e4e9, #2b4f75); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e0e4e9, #2b4f75); /* Standard syntax (must be last) */
-webkit-border-image:
-webkit-gradient(linear, 0 100%, 0 0, from(#182d42), to(#e0e4e9)) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(bottom, #182d42, #e0e4e9) 1 100%;
-moz-border-image:
-moz-linear-gradient(bottom, #182d42, #e0e4e9) 1 100%;
-o-border-image:
-o-linear-gradient(bottom, #182d42, #e0e4e9) 1 100%;
border-image:
linear-gradient(to top, #182d42, #e0e4e9) 1 100%;
}
#header #mainmenu ul li a:hover {
background-color: #000;
color: 000;
}
#header #mainmenu ul li:first-child a { border-width: 0px 5px 0px 0px; }
#header #mainmenu ul li:last-child a { border-width: 0px 0px 0px 5px; }
