[JC2]

@Christoph Do you know if the links/urls can be renamed? So from http://www.yourwebsite.com/portfolio/ to http://www.yourwebsite.com/projects/ , for example?

[JC2]

Many thanks @Christoph and @Victor Font! the z-index seemed to work. I'm now digging into the jQuery error...

[JC2]

I'm guessing that this is the relevant code:

/*

Site Navigation

---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {

clear: both;

color: #fff;

font-size: 14px;

font-size: 1.4rem;

font-family: 'Roboto', sans-serif;

font-weight: 400;

line-height: 1.5;

width: 100%;

}

.genesis-nav-menu .menu-item {

display: inline-block;

text-align: left;

}

.genesis-nav-menu a {

border: none;

color: #fff;

display: block;

font-size: 14px;

font-size: 1.4rem;

font-weight: 300;

letter-spacing: 1px;

letter-spacing: 0.1rem;

padding: 20px;

padding: 2rem;

position: relative;

}

.genesis-nav-menu a:hover,

.genesis-nav-menu .current-menu-item > a,

.genesis-nav-menu .sub-menu .current-menu-item > a:hover {

color: #ff9046;

}

.genesis-nav-menu > .menu-item > a {

text-transform: uppercase;

}

.genesis-nav-menu .sub-menu {

left: -9999px;

letter-spacing: 0;

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: 225px;

z-index: 99;

}

.genesis-nav-menu .sub-menu a {

background: #444;

padding: 10px;

padding: 1rem;

position: relative;

width: 225px;

}

.genesis-nav-menu .sub-menu a:hover {

}

.genesis-nav-menu .sub-menu .sub-menu {

margin: -54px 0 0 159px;

}

.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: 20px 0;

padding: 2rem 0;

text-transform: uppercase;

}

.genesis-nav-menu > .right > a {

display: inline;

padding: 0;

}

.genesis-nav-menu > .rss > a {

margin-left: 48px;

margin-left: 4.8rem;

}

.genesis-nav-menu > .search {

padding: 6px 0 0;

padding: 0.6rem 0 0;

}

/* Site Header Navigation

--------------------------------------------- */

.site-header .sub-menu {

}

.site-header .sub-menu .sub-menu {

margin-top: -55px;

}

/* Primary Navigation

--------------------------------------------- */

.nav-primary {

background-color: #333;

}

.nav-primary a,

.nav-primary .genesis-nav-menu .sub-menu a {

color: #fff;

}

.nav-primary .genesis-nav-menu .sub-menu a {

background-color: #333;

border: 1px solid #444;

border-top: none;

}

.nav-primary .sub-menu a:hover {

color: #FF6600;

}

/* Secondary Navigation

--------------------------------------------- */

.nav-secondary {

margin-bottom: 20px;

margin-bottom: 2rem;

}

.site-footer .nav-secondary a {

color: #fff;

margin: 0 30px;

margin: 0 3rem;

padding: 0;

}

.site-footer .nav-secondary a:hover {

color: #999;

}

.site-footer .nav-secondary .genesis-nav-menu .sub-menu a {

background-color: #333;

border: 1px solid #444;

border-top: none;

padding: 16px;

padding: 1.6rem;

}

.site-footer .nav-secondary .sub-menu a:hover {

color: #FF6600;

}

[JC2]

Belated thanks Mike. I'm finally checking it out now....

[JC2]

thanks for the fast feedback!

I still get the same problem here - and have cleared the cache...strange. The link that shows on the click is http://www.hepper.com/reviews/%E2%80%8E - I don't know where the %E2%80%8E comes from.....

[JC2]

This reply has been marked as private.

[JC2]

Thanks Tony.  I'm still working on this...  My version of Genesis doesn't have that option, but there is a way to upload a header image in appearance/header.

I looked into the theme css, but couldn't figure out where to add or replace code with the code you recommended.  What do you think?  This is the code I think I should be working on, but not sure what to do:

 

/* Header
------------------------------------------------------------ */

#header {
margin: 0 auto;
min-height: 100px;
width: 100%;
}

#title-area {
float: left;
overflow: hidden;
width: 25%;
}

#title {
font-family: 'Open Sans', sans-serif;
font-size: 36px;
font-weight: bold;
line-height: 1.25;
margin: 0 0 5px;
}

#title a,
#title a:hover {
color: #222;
display: block;
padding: 27px 0 0;
text-decoration: none;
}

#header .widget-area {
float: right;
width: 75%;
}
/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 100px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 25%;
}
/* Image Header - Full Width
------------------------------------------------------------ */

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
width: 100%;
}

[JC2]

Many thanks Brad!  Your advice worked great.

For any one else that is also learning - here's the "custom" code to add to your css.  Note - the color in this code is set as safety orange. #cc6600

/* 13e - Metro custom ----------- */

.metro-custom a,
.metro-custom .genesis-nav-menu li.right a:hover,
.metro-custom #footer a:hover,
.metro-custom #subnav .subnav-left a:hover {
color: #cc6600;
}

.metro-custom a:hover,
.metro-custom .post-info a:hover,
.metro-custom .post-meta a:hover {
color: #222;
}

.metro-custom .post-info a,
.metro-custom .post-meta a {
color: #999;
}

.metro-custom a.social-buttons,
.metro-custom .genesis-nav-menu a,
.metro-custom .post-comments a {
color: #fff;
}

.metro-custom h2 a,
.metro-custom h2 a:visited {
color: #333;
}

.metro-custom h2 a:hover {
color: #cc6600;
}

.metro-custom a.social-buttons:hover,
.metro-custom button:hover,
.metro-custom input:hover[type="button"],
.metro-custom input:hover[type="submit"],
.metro-custom .btn:hover,
.metro-custom .genesis-nav-menu .current-menu-item a,
.metro-custom .genesis-nav-menu li a:hover,
.metro-custom .genesis-nav-menu li:hover a,
.metro-custom .navigation li a:hover,
.metro-custom .navigation li.active a,
.metro-custom .post-comments a,
.metro-custom .sidebar .enews-widget input[type="submit"],
.metro-custom #title a {
background-color: #cc6600;
}

.metro-custom .genesis-nav-menu li li a,
.metro-custom .genesis-nav-menu li li a:link,
.metro-custom .genesis-nav-menu li li a:visited,
.metro-custom .post-comments a:hover {
background-color: #333;
}

.metro-custom .genesis-nav-menu li li a:hover {
background-color: #cc6600;
}

.metro-custom .sidebar .enews-widget input:hover[type="submit"] {
background-color: #fff;
}

[JC2]

Thanks Susan!

I just want the logo, which is not the full width of the header.  I suppose I could work around like you and use a transparent background for the rest of the header graphic. I was wondering if there was a more straightforward way to do this that I had overlooked in the settings..

 

[Author]

Posts