[tboslett]

Hello. I’m trying to set my main menu to stretch the entire width of the mainmenu container, but I’m not having much luck with the css. I’ve seen posts that reference centering the menu items, but in addition to centering, I would like then to use the entire width of the container.
An example of the current menu can be seen at: http://www.lisaboslett.com/mainmenu.png
The menu items are left justified. What css would I use to center them across the entire width of the container (978px)?

Any help would be greatly appreciated.

[Sakin]

@tboslett: Sorry I cannot give css solution by checking in screenshot. I need to see your site URL then I can check in and provide you css.

[tboslett]

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; }

[Sakin]

@tboslett: You have added so many css. So, can you try adding the following css so that your menu item with take the width that you have assigned.

#header #mainmenu ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

[tboslett]

Thanks Sakin. That worked perfectly!

[Author]

Posts