Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS question – Horizontal menu width doesn't go full width of container
Tagged: primary menu width
- This topic has 2 replies, 2 voices, and was last updated 7 years, 4 months ago by danielleB.
-
AuthorPosts
-
October 23, 2016 at 12:07 pm #195215danielleBParticipant
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
October 23, 2016 at 12:35 pm #195228WilliamMemberTry this 🙂
.genesis-nav-menu .nav-services { width: 20% !important; }
Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !
November 30, 2016 at 7:45 am #196816danielleBParticipantThank you!
Danielle
-
AuthorPosts
- The topic ‘CSS question – Horizontal menu width doesn't go full width of container’ is closed to new replies.