CSS question – Horizontal menu width doesn't go full width of container

[danielleB]

There's a few pixels missing on the right side of my horizontal menu to make it line up nice and neat with the content width of the page, which happens to contain the genesis slider. When I try to add the extra pixels to the CSS to extend the menu to the edge of the content container, the last menu item shifts down to a second row. I'm stumped! Help?

/*Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
background-color: #fffefd;
clear: both;
color: #666;
font-size: 14px;
line-height: 1.5;
margin: 0px;
overflow: hidden;
padding: 0px;
width: 100%;
}

.genesis-nav-menu .menu-item {
display: inline-block;
margin: 0;
padding: 0px;
text-align: center;
}

.genesis-nav-menu a {
color: #666;
display: block;
padding: 10px;/*This is the thickness of the horizontal primary menu bar*/
position: relative;
}

.genesis-nav-menu li:hover,
.genesis-nav-menu a:hover {
background-color: #fffefd;
color: #666;/*Changes in item menu styling below*/
/*font-weight: bold;*/
text-decoration: none;
}

.genesis-nav-menu .current-menu-item > a {
background-color: #2ea0dc;
color: #fff;
}

.genesis-nav-menu .sub-menu {
left: -9999px;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 222px;
z-index: 999;
}

.genesis-nav-menu .sub-menu a {
background-color: #fffefd;
border: 1px solid #f5f5f5;
border-top: none;
color: #666;
font-size: 12px;
padding: 10px 18px;
position: relative;
width: 222px;
text-align: left;
}

.genesis-nav-menu .sub-menu a:hover {
background-color: #f5f5f5;
color: #222;
}

.genesis-nav-menu .sub-menu .sub-menu {
margin: -40px 0 0 223px;
}

.genesis-nav-menu .menu-item:hover {
position: static;
}

.genesis-nav-menu .menu-item:hover > .sub-menu {
left: auto;
opacity: 1;
}

.genesis-nav-menu > .first > a {
padding-left: 0;
}

.genesis-nav-menu > .last > a {
padding-right: 0;
}

.genesis-nav-menu > .right {
display: inline-block;
float: right;
list-style-type: none;
padding: 16px 20px;
}

.genesis-nav-menu > .right > a {
display: inline;
padding: 0;
}

.genesis-nav-menu > .rss > a {
background: url(images/icon-rss.png) no-repeat left;
background-size: 12px 12px;
margin-left: 12px;
padding-left: 16px;
}

.genesis-nav-menu > .twitter > a {
background: url(images/icon-twitter-nav.png) no-repeat left;
background-size: 16px 16px;
padding-left: 20px;
}

.genesis-nav-menu > .search {
padding: 0;
}

.genesis-nav-menu .search-form {
width: 100%;
}

/* Primary Navigation
--------------------------------------------- */

/*PRIMARY MENU ITEM STYLING - MRC
-----------------------------------------------------------------------------------*/

.genesis-nav-menu .nav-mrc {
background-color: #2ea0dc;
width: 19.5%;/*This is the width of menu block*/
}

.genesis-nav-menu .nav-mrc a {
background-color: #2ea0dc;
color: #fffefd;
display: block;
}

.genesis-nav-menu .nav-mrc li:hover,
.genesis-nav-menu .nav-mrc a:hover,
.genesis-nav-menu .nav-mrc .sub-menu a {
background-color: #2ea0dc;
color: #fffefd;
text-decoration: none;
}

.genesis-nav-menu .nav-mrc .sub-menu a:hover {
background-color: #fffefd;
color: #2ea0dc;
}

/*PRIMARY MENU ITEM STYLING - SERVICES
------------------------------------------------------------------------------------*/

.genesis-nav-menu .nav-services {
background-color: #8fc74a;
width: 19.5%;/*This is the width of menu block*/
}

.genesis-nav-menu .nav-services a {
background-color: #8fc74a;
color: #fffefd;
display: block;
}

.genesis-nav-menu .nav-services li:hover,
.genesis-nav-menu .nav-services a:hover,
.genesis-nav-menu .nav-services .sub-menu a {
background-color: #8fc74a;
color: #fffefd;
text-decoration: none;
}

.genesis-nav-menu .nav-services .sub-menu a:hover {
background-color: #fffefd;
color: #8fc74a;
}

/*PRIMARY MENU ITEM STYLING - PROGRAMS
-------------------------------------------------------------------------------------*/

.genesis-nav-menu .nav-prog {
background-color: #f5970a;
width: 19.5%;/*This is the width of menu block*/
}

.genesis-nav-menu .nav-prog a {
background-color: #f5970a;
color: #fffefd;
display: block;
}

.genesis-nav-menu .nav-prog li:hover,
.genesis-nav-menu .nav-prog a:hover,
.genesis-nav-menu .nav-prog .sub-menu a {
background-color: #f5970a;
color: #fffefd;
text-decoration: none;
}

.genesis-nav-menu .nav-prog .sub-menu a:hover {
background-color: #fffefd;
color: #f5970a;
}

/*PRIMARY MENU ITEM STYLING - DOCUMENTATION
-------------------------------------------------------------------------------------*/

.genesis-nav-menu .nav-doc {
background-color: #3c948b;
width: 19.5%;/*This is the width of menu block*/
}

.genesis-nav-menu .nav-doc a {
background-color: #3c948b;
color: #fffefd;
display: block;
}

.genesis-nav-menu .nav-doc li:hover,
.genesis-nav-menu .nav-doc a:hover,
.genesis-nav-menu .nav-doc .sub-menu a {
background-color: #3c948b;
color: #fffefd;
text-decoration: none;
}

.genesis-nav-menu .nav-doc .sub-menu a:hover {
background-color: #fffefd;
color: #3c948b;
}

/*PRIMARY MENU ITEM STYLING - COMMUNICATION
--------------------------------------------------------------------------------------*/

.genesis-nav-menu .nav-presse {
background-color: #666;
width: 19.5%;/*This is the width of menu item block*/
}

.genesis-nav-menu .nav-presse a {
background-color: #666;
color: #fffefd;
display: block;
}

.genesis-nav-menu .nav-presse li:hover,
.genesis-nav-menu .nav-presse a:hover {
background-color: #666;
color: #fffefd;
text-decoration: none;
}

.genesis-nav-menu .nav-presse .sub-menu a:hover {
background-color: #fffefd;
color: #666;
}

---

Danielle

http://www.mrcpontiac.qc.ca

[William]

Try this 🙂

.genesis-nav-menu .nav-services {
    width: 20% !important;
}

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[danielleB]

Thank you!

---

Danielle

[Author]

Posts