Lifestyle Pro Secondary Navigation Issue After Resizing Header Image

[CindyLeighDesign]

I am using the Lifestyle Pro theme and customizing it quite a bit. I replaced the text header with a full-span image header rather than the text header (width: 868px height 200px) I updated the CSS and the functions.php which makes the header show up just fine. However, it's causing issues with the drop-down menu in the Secondary menu below the header image. the drop down is popping up over the main navigation (so I can't click on them). I've tried everything I can think of in the CSS but am obviously missing something. Any help would be appreciated!!

I'm currently in the process of changing the name servers - so if anyone looks at it today, use the temp url:

http://ecres148.servconfig.com/~mystx ... once the name server change happens it will be http://www.my-stcroix.com (you'll see a logo in the middle of the header with "make it yours" in a fancy font to know you're on the correct version.. the other was Inspyr which I hated)

the code for the navigation is below for reference:

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

.genesis-nav-menu {
clear: both;
font-size: 12px;
font-size: 1.2rem;
line-height: 1;
width: 100%;
font-family: Verdana, Palatino, Arial;
}

.genesis-nav-menu .menu-item {
display: inline-block;
text-align: left;
}

.genesis-nav-menu a {
font-family: Verdana, Palatino, Arial;
color: #fff;
font-size: 12px;
font-size: 1.2rem;
display: block;
padding: 20px 24px;
padding: 2rem 2.4rem;
position: relative;
text-decoration: none;
border-right-color: #FFFFFF;
}

.genesis-nav-menu .entry:last-child {
border-right-color: none;
}

.genesis-nav-menu > li:hover a,
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
background-color: #fff;
color: #a5a5a3;
}

.genesis-nav-menu .sub-menu {
left: -9999px;
opacity: 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: 184px;
z-index: 99;
}

.genesis-nav-menu > li:hover .sub-menu a,
.genesis-nav-menu .sub-menu a {
background-color: #dcefef;
color: #0076a3;
font-size: 14px;
font-size: 1.4rem;
padding: 16px 24px;
padding-top: 1.6rem;
padding-right: 2.4rem;
padding-left: 2.4rem;
padding-bottom: 1.6rem;
position: relative;
width: 184px;
}

.genesis-nav-menu > li:hover .sub-menu a:hover,
.genesis-nav-menu .sub-menu a:hover {
background-color: #fff;
color: #f6921e;
}

.genesis-nav-menu .sub-menu .sub-menu {
margin-top: px;
margin-right: 0;
margin-left: 183px;
margin-bottom: 0;
}

.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;
padding-top: 40px;
}

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

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

.genesis-nav-menu > .right > a {
background: none;
color: #a5a5a3;
display: inline;
padding: 0;
}

.genesis-nav-menu > .right > a:hover {
color: #76d2c5;
}

.genesis-nav-menu > .rss > a {
margin-left: 48px;
margin-left: 4.8rem;
}

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

.genesis-nav-menu .search-form input[type="search"] {
background-position: 12px 12px;
font-size: 12px;
font-size: 1.2rem;
padding: 12px 12px 12px 44px;
padding: 1.2rem 1.2rem 1.2rem 4.4rem;
}

thanks in advance for any help!

http://www.my-stcroix.com

[Tom]

Hi! I think you should start with a "reset" of your menu CSS. Mostly you are only changing colors and L/R padding, so let's start over.

Would you try the following? Safely back up your existing style.css to start, then delete lines 935 through 1107 and replace it with the code from this pastebin: http://pastebin.com/KGfNmMrF

There may be some minor tweaking to follow, but this should eliminate the drop-down, pop-up bouncing and start off with your color selection.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts