- This topic has 4 replies, 2 voices, and was last updated 9 years, 7 months ago by tboslett.
-
AuthorPosts
-
October 5, 2014 at 6:03 am #45290tboslettMember
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.
October 5, 2014 at 11:50 pm #45314SakinKeymaster@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.
October 6, 2014 at 5:20 am #45328tboslettMemberThanks 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; }October 6, 2014 at 5:13 pm #45351SakinKeymaster@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%; }
October 6, 2014 at 7:14 pm #45357tboslettMemberThanks Sakin. That worked perfectly!
-
AuthorPosts
- The topic ‘full width main menu’ is closed to new replies.